javascript - Jquery帮助: . click()到每个单独的元素

Question

我编写了这段代码，当按钮( #share-but) 被点击，但问题是我无法一次仅适用于一个 .share div，因为每次我单击一个按钮时，所有 .shareboxs 获取应用于其的类 .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 <---- 当我单击其中一个按钮时发生这种情况，但我只希望在单击时向其中添加一个 .sharebox 类 .box-open同一 .share div 内的 #share-but。

我希望这一切都是有道理的。我对 Javascript/Jquery 仍然很菜鸟，因为我大约两周前才开始学习，所以非常感谢任何帮助!

Answer 1

您必须使用 $(this) 而不是 $('.sharebox') 来解决事件源

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

应该是

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

元素的 id 在文档中应该是唯一，这样你就可以将点击直接绑定(bind)到'#share-but'，如果它不唯一，你可以像这样绑定(bind)它。

$('.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");
});