0

このコードは、テーブル ノードが最初にクリックされたときに必要なすべてのことを実行します (画像が追加されるなど)。ただし、2 番目のノードをクリックすると、選択肢が再び表示されますが、2 回などです。要素を一度だけ追加する方法はありますか? 問題のフィドルを作成しました。Chrome では動作しますが、JSFiddle 自体では動作しません。おそらく私は何か間違ったことをしています。http://jsfiddle.net/Inkers/NyxCuありがとうございます。

    <html>
 <head>
    <meta name = "viewport" content="width=device-width, height= device-height, initial-scale=1.0, maximum-scale=1.0"/>
    <meta charset=UTF-8"/>
    <title>Whatever it is going to be</title>
      <script type="text/javascript" charset="utf-8" src="fiddle.js"></script>
 </head>

    <body>
  <h3>Create a new table</h3>
  <div id="holdTable">
    <form id="chartInput">
        <label for="taskname">Task</label>
        <input id="taskname" type="text" placeholder="Blah blah"><br>

        <label for="days">How many days</label>
        <input id="days" name="days" type="number" min="1" max="7"><br>

        <label for="times">How many times a day</label>
        <input id="times" name="times" type="number" min="1" max="4"> <br>

        <input id="createChart" type="button" value="Make the table" onClick="makeChart();"> <br>

    </form>
    </div>
   </body>
</html>



     var makeChart = function () {
var table = document.createElement('table'),
    taskName = document.getElementById('taskname').value,
    header = document.createElement('th'),
    numDays = document.getElementById('days').value, //columns
    howOften = document.getElementById('times').value, //rows
    row,
    r,
    col,
    c;

header.innerHTML = taskName;
table.appendChild(header);

header.innerHTML = taskName;
table.appendChild(header);

function addImage(col) {
    var img = new Image();
    img.src = "http://cdn.sstatic.net/stackoverflow/img/tag-adobe.png";
    col.appendChild(img);
    img.onclick = function () {
        var myImages = new Array();
        myImages[0] = "http://www.olsug.org/wiki/images/9/95/Tux-small.png";
        myImages[1] = "http://a2.twimg.com/profile_images/1139237954/just-logo_normal.png";
        for (var i = 0; i < myImages.length; i++) {
            var allImages = new Image();
            allImages.src = myImages[i];

            var my_div = document.createElement("div");
            my_div.id = "showPics";
            document.body.appendChild(my_div);
            var newList = document.createElement("ul");
            newList.appendChild(allImages);
            my_div = document.getElementById("showPics");
            my_div.appendChild(newList);
            my_div.style.display = 'block';

            allImages.onclick = function (e) {
                img.src = e.target.src;
                my_div.style.display = 'none';
            };
        }
    };
};
for (r = 0; r < howOften; r++) {
    row = table.insertRow(-1);
    for (c = 0; c < numDays; c++) {
        col = row.insertCell(-1);
        addImage(col);
    }
}
document.getElementById('holdTable').appendChild(table);
};
4

1 に答える 1

1

要素を一度だけ追加する方法はありますか?

はい。次の行を関数の最後に置くだけで、一度だけ機能します

img.onclick = function() {
    // other code
    img.onclick=null;
}

例1.

または、ボタンにこれが必要な場合があります

var makeChart = function() {
    // other code
    document.getElementById('createChart').onclick=null;
}

例2

于 2013-01-05T02:35:10.760 に答える