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。如何将click事件与每个div绑定？

我尝试过：

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

但是当我点击时，没有任何反应，即使页面加载时，点击也不会触发，执行JavaScript。

Answer 1

尝试转动

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

到

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

Answer 2

问题是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 3

我在这里看到的问题是你正在执行这个功能。你可以这样做：

$('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 4

我不确定myFunc（）正在做什么，但你的选择器很好。见这个例子：

http://jsfiddle.net/sYWwK/

它正在注销你点击的div：

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

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
  }
});

jQuery：将可点击事件分配给具有相似ID的多个div

5 个答案: