0

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

            $("#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);
                });
            }
4

4 回答 4

4

迭代时，每个函数都会关闭变量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));
}
于 2013-09-26T17:54:37.233 回答
3

您可以使用开头

$( document ).ready(function() {

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

});
于 2013-09-26T18:04:11.050 回答
2

这是一个解决方案。

将您的标记更改为：

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

和你的处理程序：

$('.thumbnail').click(function() {
    switchHouse($(this).data('index'));
});
于 2013-09-26T17:52:32.007 回答
1

为每个图像添加一个具有唯一拇指 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);
});
于 2013-09-26T18:06:36.497 回答