1

ユーザーに写真を提示しようとしています。写真を選択してテーブルに追加できます。これは問題ありませんが、別のイメージを別のテーブル ノードに追加しようとすると、完全なリストが再度生成されます。基本的に、画像ピッカーが必要です。クリックが呼び出されるたびに img.onclick が画像リストを構築していることは理解していますが、それについて理解することはできません。私が試してみました

var element = document.getElementById("menu");
element.parentNode.removeChild(element);

イベントが呼び出されるたびに追加されたdivを削除しようとする方法ですが、私にとってはうまくいきません。しばらくこれを解決しようとしてきたので、すべての助けが本当に感謝しています。

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 my_div = document.createElement("div");
            my_div.id = "showPics";
            document.body.appendChild(my_div);
            newList = document.createElement("ul");
            newList.appendChild(allImages);
            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

ここで、コードの更新バージョンを作成しました: http://jsfiddle.net/NyxCu/15/これはおそらくあなたがやりたいことをします。

学ぶ必要がある JavaScript スタイルの詳細があります。しかし、最初に問題を確認しましょう。

これらの行で：

        var my_div = document.createElement("div");
        my_div.id = "showPics";
        document.body.appendChild(my_div);

同じ ID を持つ div を数回作成しています。ただし、ID はドキュメント内で一意である必要があります。ブラウザはそれについて文句を言うつもりはありませんが、getElementById後で行うと不要な div が表示されます。

送信した jsfiddle リンク (http://jsfiddle.net/Inkers/NyxCu/) ではgetElementById、数行後にコードが実行されます。

            my_div = document.getElementById("showPics");
            my_div.appendChild(newList);

これは、最初の画像をクリックするたびに、2 番目の画像が常に同じ div に追加されることを意味します (これが、画像が何度も複製される理由です)。

おそらく、onclickイベント ハンドラーがループに設定されているため、そのハックを行った可能性があります。

        allImages.onclick = function (e) {
            img.src = e.target.src;
            my_div.style.display = 'none';
        };

期待どおりに機能しませんでした。問題は、JavaScript 変数のスコープが関数レベルでのみ適用されることです。

だということだ：

    for (var i = 0; i < length; i++) {
         var item = create(i);
     }

以下と同等です。

    var i, item;
    for (i = 0; i < length; i++) {
         item = create(i);
    }

これは重要。イベント ハンドラーを作成すると、次のようになります。

    var i, item;
    for (i = 0; i < length; i++) {
         item = create(i);
         something.onclick = function () {
               use(item);
         }
    }

itemあなたが期待するものではありません。に割り当てられた関数onclickは、親環境への参照を持つクロージャーです: 親関数は for ループのスコープではありません。item常に と等しいことを意味しcreate(length - 1);ます。

そのため、コードで予期しないmy_div.

コードのもう 1 つの問題 (リンクの書き換えられたコードでは変更していません) は、画像の 2 番目のリストが何度も生成されることです (HTML を調べて確認してください)。

要約する：

  • 要素の ID は一意である必要があります。ID が重複していてもエラーは発生しませんが、ID で検索すると予期しない結果が生じる可能性があります。

  • JavaScript スコープの違いとクロージャに注意してください。JavaScript 変数のスコープは、常に関数レベルにあります。

いくつかのヒント：

  • jQuery を少し学ぶと、DOM 操作に大いに役立ちます。

  • 避けてくださいnew Array()。配列リテラルを使用すると、短くて読みやすくなります。

  • ECMAScriptforEachとmapを見てくださいfilter。それらは、私の好みでは読みやすい機能的なスタイルで JavaScript を作成するのに役立ちます (古いバージョンの Explorer では使用できませんが、シムまたは Underscore.js を使用できます)。

于 2013-01-12T17:58:42.393 に答える