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元素中包含的每个图像都有自己的onclick？

还有其他建议吗？

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值是它在循环结束时的最后一个值 - not 在创建闭包时。

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

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

在Javascript / Jquery中创建几个动态onclick事件

2 个答案: