jQuery：將可點擊事件分配給具有相似ID的多個div

Question

我正在顯示多個條目的網站上工作。每個條目都可以展開/摺疊，顯示更多/更少的信息。每個條目的HTML看起來像：

<div id="entry-1"><div>some text</div><div><img></div></div> 
<div id="entry-2"><div>some text</div><div><img></div></div> 
<div id="entry-3"><div>some text</div><div><img></div></div> 

「entry- {1,2,3}」中的1,2,3是每個帖子的ID。如何將點擊事件綁定到每個div？

我試着這樣做：

$('div[id^="entry-"]').click(myFunc($(this))) ; 

但是當我點擊，什麼也不會發生，點擊不火，甚至在頁面加載時，JavaScript執行時，雖然。

Answer 1

的問題是this關鍵字。在此代碼...

$('div[id^="entry-"]').click(myFunc($(this))); 

...的this值不指向已被點擊，而是全局對象（窗口）的DOM元素。

這會工作：

$('div[id^="entry-"]').click(function() { 
    myFunc($(this)); 
}); 

---

由於@JCOC指出，您呼叫的功能。
在您的原始代碼中，將立即調用myFunc($(this))，並將其返回值傳遞給click()方法。

所以，如果你的函數返回undefined，例如，然後將生成的代碼會是這樣：

$('div[id^="entry-"]').click(undefined); 

...這顯然是行不通的。

Answer 2

我不確定myFunc（）在做什麼，但是你的選擇器很好。看到這個例子：

http://jsfiddle.net/sYWwK/

它註銷DIV你點擊：

$('div[id^="entry-"]').click(function() { 
     console.log($(this)); 
    }); 

Answer 3

嘗試關閉

$('div[id^="entry-"]').click(myFunc($(this))) ; 

到

$('div[id^="entry-"]').click(function(){ myFunc($(this)); }) ; 

Answer 4

我在這裏看到的問題是您正在執行該功能。你可以這樣做：

$('div[id^="entry-"]').click(myFunc) ; 

function myFunc(){ 
    var some = $(this); 
    ... 
} 

另外，我以前推薦您使用類：

<div id="entry-1" class="entry"></div> 
<div id="entry-2" class="entry"></div> 
//JS Selector: 
$("div.entry") 

所以總和：

$('div.entry').click(myFunc); 

Answer 5

現在你要附加一個點擊監聽器每一個入口。實現此目的的更好方法可能是將單擊偵聽器附加到條目的父級。所以，如果我們有如下HTML：

<div id="entries"> 
    <div id="entry-1"><div>some text</div><div><img></div></div> 
    <div id="entry-2"><div>some text</div><div><img></div></div> 
    <div id="entry-3"><div>some text</div><div><img></div></div> 
</div> 

中的JavaScript將是這個樣子：

$('#entries').click(function (e) { 
    if (e.target.id.match('entry')) { 
    var entry = $(e.target); 
    // logic for show more/less 
    } 
}); 

如果你去的路線，其他人都建議，並在每個條目，在JavaScript中使用類看起來更像是這樣的：

$('#entries').click(function (e) { 
    if (e.target.className.match('entry') || $(e.target).parents('.entry').length) { 
    var entry = $(e.target); 
    // logic for show more/less 
    } 
});