生成多個jquery點擊功能

客戶端從服務器接收一些圖像，然後根據該圖像創建縮略圖。當用戶點擊這些縮略圖時，它會做一些事情。但是，從服務器發送的圖像數量可以是任意數量。所以現在我被卡住了，我不知道如何產生點擊功能，而不需要像下面那樣寫出每一個。有人能指導我朝正確的方向而不給我實際的答案嗎？生成多個jquery點擊功能

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

來源

2013-09-26 user308553

同阿薩德的解決方案，而是一個演示這裏：http://jsfiddle.net/aGfNS/1/ – lastr2d2

你缺少'「#thumb」破折號+ i'它應該是'「＃拇指 - 「+我' – Danny

迭代時，每個函數關閉在變量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-26 17:54:37

你可以告訴我爲什麼我們需要返回功能（）{}，我很新 – user308553

@ user308553當然。你看，我們希望能夠在特定的迭代中引用'i' *的值，而不必讓我們的處理程序關閉'i'並且保持最新的值。當我說「close over」時，我的意思是如果直接在函數中引用'i'，函數將鎖定到實際的'i'變量，該變量隨着每次迭代而不斷變化。爲了避免這種情況，我們將'i'的值傳遞給一個匿名函數（'click'內），該函數創建您需要的處理函數並返回它。內部函數鎖定到'index'參數，它的值爲'i'。 –

@ user308553您應該閱讀Javascript中的閉包。這會讓這個更清楚。 –

這裏有一個解決方案。

您的標記改成這樣：

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

而且你的處理程序是：

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

來源

2013-09-26 17:52:32

可以使用Starts With

$(document).ready(function() { 

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

});

來源

2013-09-26 18:04:11

類添加到每個圖像具有獨特的拇指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-26 18:06:36 Taz

生成多個jquery點擊功能

回答

相關問題