1

配列から画像を表示しています。ユーザーが配列から画像を選択して、テーブル内の現在の画像 img.src を置き換えることができるようにしたいと考えています。セルがクリックされたときに画像の選択肢をユーザーに表示することができましたが、ここからどこに行くべきかわかりません。配列画像でクリックハンドラーを試しましたが、配列の最後の画像がクリックされたときにのみアラートが表示されます。混乱している。すべての助けに感謝します。

  function addImage (col) {
var img = new Image();  // Note that a new img variable will be declared each time this function is called
img.src = "../www/images/TEST.png";
col.appendChild(img); 
img.onclick = function () {
    var myImages = new Array();
    myImages[0] = "../www/images/TEST3.png";
    myImages[1] = "../www/images/TEST2.png";
    myImages[2] = "../www/images/TEST4.png";

    for (var i = 0; i < myImages.length; i++) {
        var allImages = new Image();
        allImages.src=myImages[i];


        var newList = document.createElement("ul");
        var newContent = allImages;
        newList.appendChild(newContent); 
        my_div = document.getElementById("showPics");
        document.body.insertBefore(newList, my_div);
        };

        allImages.onclick = function(){

        alert("the click is working");//it is but only for the last image...grrrrr
        };
        //this.src = ????;
       };
      };

     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

2

まず、クリックの割り当てをループ内に移動する必要があります。

function addImage(col) {
    var img = new Image(); // Note that a new img variable will be declared each time this function is called
    img.src = "../www/images/TEST.png";
    col.appendChild(img);
    img.onclick = function() {
        var myImages = new Array();
        myImages[0] = "../www/images/TEST3.png";
        myImages[1] = "../www/images/TEST2.png";
        myImages[2] = "../www/images/TEST4.png";

        for (var i = 0; i < myImages.length; i++) {
            var allImages = new Image();
            allImages.src = myImages[i];


            var newList = document.createElement("ul");
            var newContent = allImages;
            newList.appendChild(newContent);
            my_div = document.getElementById("showPics");
            document.body.insertBefore(newList, my_div);
            allImages.onclick = function(e) {
                img.src = e.target.src;
            };

        };

        //this.src = ????;
    };
};

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);
};

...しかし、あなたが持っているコードは、画像がクリックされるたびにクリックハンドラーを再割り当てし、DOM (HTML) 要素を再作成します。my_div代わりに、その後のクリックでのみ表示/非表示にすることを検討することをお勧めします。

于 2013-01-02T14:05:42.423 に答える