Question

我已经编写了这段代码，当点击一个按钮（.box-open）时，将一个类（.sharebox添加display：block）添加到我的框（#share-but）中问题是我无法将其设置为一次仅适用于一个.share div，因为每次我点击一个按钮，所有.sharebox都会将.box-open类应用于它。

function shareBox() {
$('.share').each(function( index ) {
    $(this).on('click', '#share-but', function() {
        if ($('.sharebox').hasClass('box-open')) {
            $('.sharebox').removeClass('box-open');
        }        
        else {
            $('.sharebox').addClass('box-open');
        }
    });
});
}
shareBox();

这是问题的图像（我正在构建Tumblr主题）。希望它更容易理解。 http://24.media.tumblr.com/c5c4252607bf4a9905c7c9de5b592c60/tumblr_ml4t2fSuQo1rqce8co1_500.png＆lt; ----当我点击其中一个按钮时发生了这种情况，但我只想让一个.sharebox在我点击{{1}时添加类.box-open在同一#share-but div。

内

我希望所有这一切都有道理。我仍然是Javascript / Jquery的非常棒的人，因为我刚开始像2周前那样学习，所以非常感谢任何帮助！

Answer 1

您必须使用$(this)代替$('.sharebox')来解决事件来源

$('.sharebox').addClass('box-open');

将是

$(this).addClass('box-open');

元素的id应该在文档中唯一，因此您可以直接将点击绑定到'＃share-but'，如果它不是唯一的，您可以像这样绑定它。

$('.share').on('click', '#share-but', function() {
    if ($('.sharebox').hasClass('box-open')) {
        $('.sharebox').removeClass('box-open');
    }        
    else {
        $('.sharebox').addClass('box-open');
    }
});

你可以使用toggleClass来简化，我假设你有一个id为＃share-but的单项，

$('#share-but').click(function(){
   $(this).toggleClass("box-open");
});

Answer 2

这将是一个更简单的版本，您可以切换类名：）

   $('.share').on("click", "#share-but", function() {
      $(this).find(".sharebox").toggleClass('box-open');
  });

Jquery帮助：.click（）到每个单独的元素

2 个答案: