jQuery循環和附加點擊事件

好吧我已經嘗試了多種事情，並尋找這個答案，我似乎無法得到它的工作。我想要做的是有一些動態生成的圖像，所以我不知道隨時會有多少圖像。每個圖像都有一些關聯的信息，我將其存儲在一個單獨的div中。我想要做的是將一個點擊事件附加到每個圖像上，以取消隱藏其中包含相關內容的div。jQuery循環和附加點擊事件

我試過用for循環和while循環循環都無濟於事。兩者都會發生什麼，因爲他們會將點擊事件附加到它上面，但無論點擊了哪個圖片，都會打開相同的div，而不會與圖片關聯。

var cnt = jQuery('#container img').length; 
    cnt = cnt - 1; 
    var i = 0 
    for(i=0; i<=cnt; i++) { 
     jQuery('#container img').eq(i).click(function() { 
      jQuery('.movie' + 1).slideDown(); 
      jQuery('#sort').hide(); 
     }); 
    } 


while(i<=cnt) { 
jQuery('#container img').eq(i).click(function() { 
     jQuery('.movie' + i).slideDown(); 
     jQuery('#sort').hide(); 
    }); 
i++

}

以上是我嘗試了兩種不同的變化。第二個沒有在這裏定義的變量，但在我的代碼中他們這樣做。我在做的是獲取我有多少圖像（var cnt），然後使用它來循環正確的次數。我假設點擊函數必須弄亂一些東西，因爲它會將它附加到每張圖片上，但會得到錯誤的div。

編輯：

按照一些意見，我試圖改變我的結構是這樣的：

<div id="container"> 
    <img /> 
    <img /> 
    <div class="expanded"> 
    // Info Goes Here 
    </div> 
    <div class="expanded"> 
    // Info Goes Here 
    </div> 
</div>

然後我試圖代碼：

jQuery(document).ready(function() { 
    jQuery('#container img').click(function() { 
     jQuery(this).next('div.expanded').show(); 
    }); 
});

但它不」不管工作。第一個圖像什麼都不做，第二個圖像顯示錯誤的div。

來源

2011-05-27 Darin

你能提供一些你的html結構嗎？ – 2011-05-27 21:03:52

你可能會顯着地過度工作。假設一個普通結構是這樣的：

<div id="container"> 
    <img /> 
    <div class="info"> 
    <img /> 
    <div class="info"> 
    <img /> 
    <div class="info"> 
</div>

你可以用得到所有這些一次...... 是這樣的：

$('#container img').click(function() { 
    $(this).next('div').show(); 
});

爲了肯定知道如何構建函數體在click處理程序中我們需要看到完整的標記，但這應該更接近，更容易。

要包含評論/問題 - 我們使用.next('div')，它在$(this)所指的元素之後找到最接近的同胞。爲了工作，圖像需要與信息div交替。否則，你需要某種編號系統，你可以參考。我已經更新了一下我的例子。讓我知道這是否有幫助。如果我們用一個編號系統工作

作爲替代方案：

<div id="container"> 
    <img class="group1" /> 
    <img class="group2" /> 
    <img class="group3" /> 
    <div class="group1" /> 
    <div class="group2" /> 
    <div class="group3" /> 
</div>

通過如下調整對JavaScript：

$('#container img').click(function() { 
    var $this = $(this); 

    $this.next('div.' + $this.attr('class')).show(); 
});

將要來真的接近你。您會注意到圖像和div共享一個編號的類，以將它們彼此關聯起來。

來源

2011-05-27 21:05:40

你打敗了我！你們如何快速發佈？ +1 – Jay 2011-05-27 21:07:41

@Jay - 我的辦公室提供咖啡機。 :) – 2011-05-27 21:08:29

好吧，我改變了我的結構，以基本上匹配你的代碼，但代碼仍然不起作用。現在最後一張圖片會顯示一個div，但它是錯誤的div，其餘的圖片不會顯示任何內容。 – Darin 2011-05-27 21:31:12

如果沒有看到您的html，您需要某種方法將img與div關聯起來，或者與屬性關聯，或者以文檔順序關聯。另一件事是你不需要循環，jQuery會自動爲你的查詢中的每個選定元素連接點擊事件。

來源

2011-05-27 21:06:32 Jay

試試這個

jQuery('#container img').each(function(){ 
    $(this).bind('click', function(){ 
     $('.movie' + $(this).index()).slideDown(); 
    }); 
});

需求優化了一點，但我在iPad :)

來源

2011-05-27 21:08:24 isNaN1247

沒有理由使用每個綁定。 jQuery使用隱含的迭代。只要有一種方法可以識別圖像/ div配對，您可以直接將其綁定。 – 2011-05-27 21:09:56

請注意，這是醜陋的 - 我強烈建議以g.d.d.c的方式來做！簡單ftw – isNaN1247 2011-05-27 21:10:43

@ g.d.d.c - 我的辦公室不提供意式咖啡機:) – isNaN1247 2011-05-27 21:11:56

第一個不工作的原因，而是始終類選擇」 .movie1' 。可能是你的意思是'我'，但儘管如此，兩個循環都應該忽略它們令人討厭的高懸代碼。

來源

2011-05-27 21:17:20 chaz

jQuery循環和附加點擊事件

回答

相關問題