在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中切换点击事件的最佳方式是什么？

回答

相关问题