'toggleClass' 没有对彼此起作用 div

Question

由于某些奇怪的原因，我添加的这个简单的点击功能，应该是将 'big' class 添加到点击的 div 中，仅适用于所有其他 div.

See an example here（点击带图片的方框）

$('.box').click(function(){

$(this).toggleClass('big').siblings().removeClass('big');

});

这是一个 fiddle，但我选择不 post 这个，因为它工作正常，它应该做的。错误是由其他一些因素引起的，但我不知道是什么 http://jsfiddle.net/Ly1bxswq/1/

Answer 1

您在一个循环中绑定了您的 click 处理程序，但是当所有元素都添加到页面时只需要执行一次。

$.each(data.feed.entry, function (i, entry) {
  // ...
  $container.append(item);
  // ...
})

$('.box').click(function(){
  $(this).toggleClass('big').siblings().removeClass('big');
}

正如 @Yan Brunet 的评论所指出的，将事件从每个 .box 委托给他们的 parent 会好得多。这样你就可以在任何时候绑定你的处理程序（甚至在 .box 元素添加到页面之前）

$container.on("click", ".box", function(){
  $(this).toggleClass('big').siblings().removeClass('big');
});

'toggleClass' 没有对彼此起作用 div

'toggleClass' not working on every other div

html

javascript

css

jquery

onclick