在javascript中切换点击事件的最佳方法是什么？

Question

我有一个“常见问题解答”页面，其中打开了一些问题，以显示答案并显示一个加号或减号图标，具体取决于您单击或打开该问题的天气。

通过将类添加到已单击以显示未打开的天气中的元素，我可以实现此操作。

$( ".faq-question" ).click(function(){
    if(!($(this).hasClass("open"))){
        $(this).addClass('open');
        $('span.icon', this).html('-');
    }else{
        $(this).removeClass('open');
        $('span.icon', this).html('+');
    }
});

我想知道是否有内置的jQuery或JavaScript切换功能可以实现此目的？ 我看到jQuery toggle（）事件已被贬值，并且在线上有很多关于如何使用自定义脚本实现此目标的建议，但是最好的方法是什么，将类添加到HTML的方法可以吗？ 为什么取消了切换功能？ 似乎很有用。

Answer 1

您的方法可行，但缺点是JS代码由于其中的+/-符号而变得难以理解。 通常，您不希望演示文稿与javascript代码混合在一起。 您可以尝试以下方法：

$( ".faq-question" ).click(function() {
    $(this).toggleClass('open');
});

并将演示文稿移至CSS：

.faq-question .icon:after {
    content: '+';
}
.faq-question.open .icon:after {
    content: '-';
}

如果明天您要使用加号/减号图标代替“ +/-”字符，则完全不需要触摸javascript代码。

Answer 2

在jQuery中使用.toggleClass

$( ".faq-question" ).click(function(){

        $(this).toggleClass('open');

        var symbol = ($(this).hasClass('open')) ? '-' : '+';

        $('span.icon', this).html(symbol);

});