0

最終的には、ユーザーがノードをクリックして、画像の選択肢が表示され、ノードに選択肢を入力できるようにしたいと思います。ただし、今のところ、テーブル作成時にノードに配置された画像を、クリック時に別の画像で変更する方法をテストしようとしています。私の論理は曖昧ですか？ 

for (r = 0; r < howOften; r++) {
        row = table.insertRow(-1);

        for (c = 0; c < numDays; c++) {
            col = row.insertCell(-1);
            img=new Image();
            img.src="../www/images/TEST.png";
            col.appendChild(img);

                img.onclick = function() {
                image1= new Image();
                image1.src="../www/images/TEST2.png";
                img=image1;     
                };
            }
        };
    document.getElementById('holdTable').appendChild(table);
};
4

1 に答える 1

0

imgをcolに追加するときは、変数imgによって「ポイントされる」画像を追加します。後で変数imgを変更して別の値を指すようにした場合（いつ）、colに追加されたものは変更されません。img = 'hello';appendChild itの直後に追加することでテストできます。「hello」ではなく、imgが追加されていることがわかります。

onclick関数でimgを「pointto」image1に変更しても、colに追加された画像は変更されません。

domに追加されたものを本当に変更したい場合は、画像を削除して、その場所に別のオブジェクトを挿入する必要があります。

しかし、幸いなことに、必要なのは別のsrcを持つ画像なので、domから画像を削除して別の画像を挿入する必要はありません。すでに存在する画像のsrcを変更するだけです。これを行うには、onclick関数で「this」変数（colにある画像を指す）を使用し、その「src」を変更する必要があります。

すなわち。

img.onclick = function() {
    // wrong:
    //var image1= new Image();
    //image1.src="../www/images/TEST2.png";
    //img=image1;  

    // right:    
    this.src = '../www/images/TEST2.png';
};
于 2012-12-30T14:30:59.640 に答える