在JavaScript中切換點擊事件的最佳方式是什麼？

我有一個常見問題解答頁面，根據問題點擊打開或關閉它的天氣，問題可以打開以顯示答案並顯示一個加號或減號圖標。在JavaScript中切換點擊事件的最佳方式是什麼？

我可以通過向已被點擊的元素添加類來實現此操作，以顯示它已被打開的天氣不是。

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

enter image description here

我不知道是否有jQuery的或JavaScript一個內置的切換功能，ASLO實現這一點？我看到jQuery toggle() event is depreciated和網上有很多關於如何使用自定義腳本來實現這一點的建議，但是最好的方法是向HTML中添加類的方法是什麼？爲什麼切換功能被刪除？它看起來非常有用。

來源

2014-08-27 Holly

以我的經驗，你是完美的方法。 – Satpal 2014-08-27 10:36:05

使用切換來切換一個班級。不推薦使用此功能作爲事件切換，而不是功能：http://api.jquery.com/toggle/ – kpull1 2014-08-27 10:39:15

請避免使用「最好的」問題，因爲它們傾向於產生討論。 – 2014-08-27 11:29:56

你的方法有效，但它的缺點是JS代碼變得突兀，因爲在它+/-符號。通常情況下，您不希望演示文稿與JavaScript代碼混合使用。你可以代替試試這個：

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

並移動演示文稿的CSS：

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

如果明天你想使用加/減圖標來代替「+/-」字符，你將不再需要觸摸JavaScript代碼。

來源

2014-08-27 10:44:16 dfsq

謝謝，爲什麼切換事件折舊。它似乎很有用！ – Holly 2014-08-27 10:51:16

使用.toggleClass jQuery中

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

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

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

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

});

來源

2014-08-27 10:38:07

爲什麼這更好？ – Holly 2014-08-27 10:41:10

在JavaScript中切換點擊事件的最佳方式是什麼？

回答

相關問題