0

我有一个从 MySQL 中提取一组缩略图并显示它们的站点。

用户通过单击选择其中一张图像，并显示图像的较大（中间）版本以及相关描述。此图像放置在占位符 div ( tablediv) 中，而描述则放在另一个中。中等大小图像的数据和描述通过 Ajax 使用 XMLHttpRequest 读取。到现在为止还挺好。

我想要做的是在中间图像上设置一个单击事件处理程序，如果用户想要查看大图像，它将在新窗口中打开一个全屏大小的图像。

使用本文中包含的代码，显示中间尺寸的图像并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 属性时，它为空，而所有其他变量值似乎都是正确的。我已经在我的书中阅读了这个问题，并参考了在线手册，我看到的所有例子似乎都与我的案例无关。

任何人都可以帮忙吗？

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;，并将getElementById调用更改为document.getElementById("img" + i).

于 2013-01-08T14:07:21.037 回答