Javascript Jquery帮助：。单击（）到每个单独的元素

我编写这段代码是为了在单击按钮（

#share but

）时将一个类（

.box open

，该类添加display:block）添加到我的框（

.sharebox

）中，但问题是每次单击按钮时，我都很难将其应用于一个.share div，所有的

.sharebox

s都将类

.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主题）。希望它更容易理解 您必须使用

$（this）

而不是

$（'.sharebox'）

来处理事件源

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

会是

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

元素的id在文档中应该是唯一的，因此您可以将单击直接绑定到“#共享”，但如果它不是唯一的，您可以这样绑定它

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

您可以使用

toggleClass

来简化，我假设您有一个id为#share的项目，但是

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

您必须使用

$（this）

而不是

$（'.sharebox'）

来处理事件源

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

会是

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

元素的id在文档中应该是唯一的，因此您可以将单击直接绑定到“#共享”，但如果它不是唯一的，您可以这样绑定它

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

您可以使用

toggleClass

来简化，我假设您有一个id为#share的项目，但是

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

---

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

---

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

---

第二个应该是

$（this.addClass（'box-open'）

谢谢@doniyor，你太好了。第二个应该是

$（this）.addClass（'box-open'）谢谢@doniyor，你真好。