0

さて、ついに私がここで抱えていたクリックの問題にペニーが落ちました（大きな音がします！）動的divを1回だけ追加し、JSFiddleの問題を追加します。コードは、クリックされたノードごとに1回の写真の選択をユーザーに表示するようになりました。ふぅ。

しかし、現在、私のimg.src=e.target.src回線は配列内の他の画像にアクセスするのに問題があります。配列の最後の画像のみがテーブルに追加されます。allImages.onclickこれは、イベントがループ内にある必要があるためだと思いますか？

私はそれを試しましたがimg、未定義として表示されています。var img宣言される前にループ（したがって関数）が実行されているためだと思いますか？物事の順番の問題だと思います。

すべての助けに感謝します。

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;

    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 = 'none';
    }
    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 () {
            my_div.style.display = 'block';

            allImages.onclick = function (e) { // I THINK THIS IS THE PROBLEM
                img.src = e.target.src;
                my_div.style.display = 'none';
                img.onclick=null;
            };
        }

    }

    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);
    document.getElementById('createChart').onclick=null;
}
4

2 に答える 2

1

関数addImage()は変数を直接参照しallImagesます。1 つの問題は、コードの前の方で for ループでその変数を使用 (および再利用) していたため、最後に割り当てられた値しか保持されないことです。したがって、何回呼び出しても、常に指定された最後の画像に関数がaddImage()追加されます。onclickallImages

allImagesまた、変数の名前を変更することをお勧めします。これは、実際には 1 つのイメージしか表さないため、非常に誤解を招く名前です。

それが役立つことを願っています!

于 2013-01-05T15:04:20.517 に答える
1

さて、問題はさまざまな部分に起因しているようです。初めに、

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 = 'none';
}

このループは、新しいdivfor EACH イメージを に作成し、それに をmyImages追加ulしdiv、最後Imageに現在のイメージの をに追加しulます。

何をdocument.getElementById('showPics')返すかという問題には、 に as 個divの がid showPics追加されbodyてmyImages.lengthいるため、二度と語られたり、考えられたりしてはならない神秘的な魔法の答えがあります。

div理にかなったことをして、ループの外側で1 つの特異な幸せを作成してみませんか? ulループの外側で、単一の子をそれに追加します。li次に、ループに必要な数だけ追加します。

var my_div = document.createElement('div');
my_div.id = 'showPics';
var newList = document.createElement('ul');
my_div.appendChild(newList);

for var i = 0; i < myImages.length; i++) {
    ...
    var li = document.createElement('li');
    li.appendChild(allImages);
    newList.appendChild(li);
    ...
}

my_div.style.display = 'none';

今、画像を含むmy_div唯一無二です。divそのため、clickイベント ハンドラーはその可視性を安全に切り替えることができます。

2番、

function addImage(col) {
    var img = new Image();
    img.src = "http://cdn.sstatic.net/stackoverflow/img/tag-adobe.png";
    col.appendChild(img);
    img.onclick = function () {
        my_div.style.display = 'block';

        allImages.onclick = function (e) { // I THINK THIS IS THE PROBLEM
            img.src = e.target.src;
            my_div.style.display = 'none';
            img.onclick=null;
        };
    }
}

allImagesループから抜けたので、同じImageオブジェクトを参照します。これはたまたま の最後のイメージですmyImages。そのため、最後の画像のみがmyImagesハンドラーをclickイベントに登録します。この問題を解決するために、新しい変数を作成します。

var sel = null; //This comes before my_div

ここで、ループ内clickにハンドラーを追加して、すべての画像がパイの一部を取得するようにします。allImages myImages

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

    allImages.onclick = function (e) {
      if(sel !== null) {
        sel.src = e.target.src;
        my_div.style.display = 'none';
        sel.onclick=null;
        sel = null;
      }
    };
    ...
}

最後に、画像をクリックしたときに設定できるようaddImageに調整します。sel

function addImage(col) {
    ...
    img.onclick = function () {
        my_div.style.display = 'block';
        sel = img;
    }
    ...
}

それだけです！例。

コメントアウトするsel.onclick = nullと、特定のセルの画像を何度でも変更できることに注意してください。

于 2013-01-05T15:10:48.137 に答える