在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() event is depreciated并且网上有很多关于如何使用自定义脚本实现这一点的建议，但最好的方法是将类添加到HTML中的方法是什么？为什么删除了切换功能？它看起来非常有用。

Answer 1

您的方法有效，但缺点是JS代码由于其中包含+/-符号而变得突兀。通常，您不希望演示文稿与javascript代码混合在一起。你可以试试这个：

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

将演示文稿移至CSS：

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

如果明天你想使用加/减图标而不是＆＃34; + / - ＆＃34;字符，你根本不需要触摸javascript代码。

Answer 2

在jquery中使用.toggleClass

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

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

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

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

});