javascript - 在 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: '-';
}

如果明天您想使用加号/减号图标而不是“+/-”字符，您根本不需要接触 JavaScript 代码。