0

クリックすると、ユーザーが選択できる他の画像が表示される背景画像のあるテーブルがあります。これは機能しており、クリックイベントで表示または非表示になります。ただし、ユーザーがクリックして 2 番目の画像を追加すると、画像のメニューが (本来あるべき姿で) 再び表示されますが、2 回表示されます。私が試した解決策をコメントアウトしました。my_div最初のクリックで表示してから削除できると思いましたallImages.onclick。これにより、Chrome で null エラーが発生しますが、おそらく理解できるでしょう。ここでの問題は似ています。リンクを正しく追加したことを願っています。とにかく、アドバイスや助けをいただければ幸いです。 

function addImage(col) {
    var img = new Image();
    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");
            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';
                //var element = document.getElementById("showPics");
                //element.parentNode.removeChild(element);
            };
        }
    };
};
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

0

すべての img を保持するために ul を追加してコードを修正しました。それは機能しますが、もっと良いかもしれません。

   function addImage(col) {

        var img = new Image();
        img.src = "../www/images/TEST.png";
        col.appendChild(img);

        var myImages = new Array();
        myImages[0] = "../www/images/TEST1.png";
        myImages[1] = "../www/images/TEST2.png";
        myImages[2] = "../www/images/TEST3.png";

        var container = document.createElement("ul");  //ul to simplify hide/show
        container.style.display = "none";

        for (var i = 0; i < myImages.length; i++) {

            var newList = document.createElement("li");
            var im = document.createElement("img");
            im.src = myImages[i];
            newList.appendChild(im);

            im.onclick = function () {
                img.src = this.src;
            };
            container.appendChild(newList);
        }

        col.appendChild(container);

        col.onclick = function () {
            if (container.style.display == "none")
                container.style.display = "block";
            else
                container.style.display = "none";
        };
    }
于 2013-01-07T03:23:29.503 に答える