0

MySQL から一連のサムネイル画像を抽出して表示するサイトがあります。

ユーザーがこれらの画像の 1 つをクリックして選択すると、画像の拡大 (中間) バージョンが関連する説明と共に表示されます。この画像はプレースホルダー div ( tablediv) に配置され、説明は別の場所に配置されます。中間サイズの画像と説明のデータは、XMLHttpRequest を使用して Ajax 経由で読み取られます。ここまでは順調ですね。

私がやりたいことは、ユーザーが大きな画像を見たい場合に、新しいウィンドウで全画面サイズの画像を開く中間画像にクリック イベント ハンドラーを設定することです。

この投稿に含まれるコードを使用すると、中間サイズの画像が表示され、onclickイベントのターゲット関数がすぐに実行されます。デバッグ目的で、新しいウィンドウを開くための元のコードをアラートに置き換えました。画像セットアップのコードは次のとおりです。

list = xhr.responseXML.getElementsByTagName('work'); 
for (var i = 0; i < list.length; i++)  {
    var workimage = (list[i].getElementsByTagName("wworkimg")[0].childNodes[0].nodeValue);
    var wheight   = (list[i].getElementsByTagName("wworkimgh")[0].childNodes[0].nodeValue);
    var wwidth    = (list[i].getElementsByTagName("wworkimgw")[0].childNodes[0].nodeValue);
    var wshape    = (list[i].getElementsByTagName("wworkimgs")[0].childNodes[0].nodeValue);
    wkimage = workimage;
    var img = document.createElement('img');
    img.id = 'img';
    img.src = workimage;
    img.alt = 'image';
    img.width = wwidth;
    img.height = wheight;
    document.getElementById("tablediv").appendChild(img);
    document.getElementById("img").onclick = newWindow(wkimage,wheight,wwidth,wshape);
}

関数は次のようにコーディングされます

function newWindow(wkimage,wheight,wwidth,wshape) {
    alert("NewWindow");
    return false;
}

Firebug を使用して onclick プロパティを調べると、null ですが、他のすべての変数値は正しいように見えます。私はこの問題を私が持っている本で読んだり、オンライン マニュアルを参照したりしましたが、私が見たすべての例は私の場合には関係がないようです。

誰でも助けることができますか？

4

1 に答える 1

0

あなたのコードをすばやく見て、これをお勧めします：

document.getElementById("img").onclick = function() {
    newWindow(wkimage,wheight,wwidth,wshape);
}

ただし、ループでハンドラーを割り当てているため、追加のクロージャーも必要になるようです。そう：

document.getElementById("img").onclick = (function(wkimage,wheight,wwidth,wshape){
    return function() {
        newWindow(wkimage,wheight,wwidth,wshape);
    }
}(wkimage,wheight,wwidth,wshape));

さて、あなたdocument.getElementById("img")は本当に奇妙です。ループ内で同じ ID を持つ複数の要素を作成している場合は、 を実行し、呼び出しを にimg.id = 'img' + i;変更することをお勧めします。getElementByIddocument.getElementById("img" + i)

于 2013-01-08T14:07:21.037 に答える