在Javascript / Jquery中创建几个动态onclick事件[重复]

Question

我有一个未排序的 HTML 图像列表。每个 Line (li) 元素都有自己的 id：

<ul id="Demo3">
    <li id="li1"><img src="images/FT/HopkinsPrairie.jpg" /></li>
    <li id="li2"><img src="images/FT/PineForest.jpg" /></li>
    <li id="li3"><img src="images/FT/2011GroupThumb.jpg" /></li>
    <li id="li4"><img src="images/FT/JuniperSpringsSwimming.jpg" /></li>
    <li id="li5"><img src="images/FT/HappyHourThumb.jpg" /></li>
    <li id="li6"><img src="images/FT/HappyHourThumb.jpg" /></li>
</ul>

当我点击每张图片时，我希望显示更大版本的图片，有点像这样：

<li id="li2"><a href="images/FT/PineForestBig.jpg" target="_blank"><img src="images/FT/PineForest.jpg" /></a></li>

不幸的是，与#Demo3 关联的 CSS 类对与所有 #li 元素关联的类进行了大量操作，因此我必须以编程方式添加锚点。

我尝试这样做：

i = 1;
while ($("#li" + i).length > 0) {  // If the li id exists
    myLink = "images/FT/Page" + i + ".jpg";  // create a link 
    var element = document.getElementById("li" + i);  // get the element
    element.onclick = function () {          // create an onclick for this element
        var win = window.open(myLink, '_blank');
        win.focus();
    }
    i++;
}

这不起作用！无论出于何种原因，每个图像都会与列表中的最后一个图像获得相同的点击。

有谁知道我做错了什么或如何解决这个问题，以便每个 li 元素中包含的每个图像都有自己的点击？

还有其他建议吗？

Answer 1

另一种方法，使用Wildcard selectors：

$("[id^=li").each(function(index, value) {
    value.click(function () {
       var id = parseInt(value.id.substring(2)); // strip "li", convert to int.
       var win = window.open("images/FT/Page" + id + ".jpg", '_blank');
       win.focus();
    });
});

或者干脆

$("[id^=li").click(function (event) {
    var id = parseInt(this.id.substring(2)); // strip "li", convert to int.
    var win = window.open("images/FT/Page" + id + ".jpg", '_blank');
    win.focus();
});

Answer 2

这不起作用！无论出于何种原因，每张图片都会获得与列表中最后一张图片相同的点击次数。

你的直接解决方案是这样的：

while ($("#li" + i).length > 0) {  // If the li id exists
    (function(i) { // <---- THIS LINE
        var myLink = "images/FT/Page" + i + ".jpg";  // create a link 
        var element = document.getElementById("li" + i);  // get the element
        element.onclick = function () {          // create an onclick for this element
            var win = window.open(myLink, '_blank');
            win.focus();
        }
        i++;
    })(i); // <---- and THIS LINE
}

原因是，myLink 被您的 onclick 闭包捕获。您的循环进行了多次，每次更改 myLink 并在 myLink 上创建一个闭包。当onclick 触发时，myLink 值是它在循环结束时的最后一个值 - 不是在创建闭包时。

上述方法使用 IIFE“修复”i 的值，并在每次迭代中创建一个单独的变量 myLink 以供 onclick 处理程序结束。

OneWay 的替代方法是直接使用另一个闭包作为each 的回调来实现这一点。我会在你的代码中使用他的解决方案，这个答案可以帮助你理解为什么你的原始行为会这样。