Question

客户端从服务器接收一些图像，然后基于创建缩略图图片。当用户点击这些缩略图时，它会做一些事情。但是，从服务器发送的图像数量可以是任意数量。所以现在我被卡住了，我不知道如何生成点击功能而不用像下面那样写出每个。有人能引导我走向正确的方向而不给我实际答案吗？

            $("#thumb-0").click(function(){
                index=0;
                switchHouse(index);
            });
            $("#thumb-1").click(function(){
                index=1;
                switchHouse(index);
            });
            $("#thumb-2").click(function(){
                index=2;
                switchHouse(index);
            });
                            ...
            $("#thumb-X").click(function(){
                index=arrayLength;
                switchHouse(index);
            });

我尝试了以下方法，但显然不起作用：

            for (var i=0; i<topHouse.length; i++){
                $("#thumb"+i).click(function(){
                    index=i;
                    switchHouse(index);
                });
            }

Answer 1

迭代时，每个函数都关闭变量i。在评估函数时，i的值已到达迭代的末尾。换句话说，当您点击缩略图时，i的值为topHouse.length，因此该函数实际上设置了index = topHouse.length。

尝试使用闭包，以便每个处理程序都有自己的索引值：

for (var i=0; i<topHouse.length; i++){
    $("#thumb"+i).click((function(index) {
        return function() {
            switchHouse(index);
        }
    })(i));
}

Answer 2

您可以使用Starts With

$( document ).ready(function() {

$("[id^='thumb']").click(function() {
    switchHouse( $(this).index() );  // or add $(this).index()+1

});

Answer 3

这是一个解决方案。

将您的标记更改为：

<whatever class="thumbnail" data-index="1" />

你的处理程序：

$('.thumbnail').click(function() {
    switchHouse($(this).data('index'));
});

Answer 4

使用唯一的拇指ID为每个图像添加一个类，以便您可以使用Jquery进行目标。然后这样做。

<img id="thumb-25" class="aThumb" src="...">

 $('.aThumb').click(function(e){
var getTheID = $(this).attr('id');
getTheID = getTheID.substring(6);

// switchHouse(getTheID);
  alert(getTheID);
});

生成多个jquery点击功能

4 个答案: