在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);

});