Question

我经常看到两种使用javascript添加或切换类的方法：

var $mainmenu = $('.navigation'),
$menuToggle = $('.trigger');

$menuToggle.on('click', function(event) {
  event.preventDefault();
  $mainmenu.toggleClass('active');
});

看起来更简单：

$('.trigger').on('click', function() {
    $('.navigation').toggleClass("active");
});

你会说哪种方法更好，为什么？

Answer 1

在您创建的第一种方法中

一个半局部范围的变量$ mainmenu
一个全局变量$ menuToggle

如果您只想使用click回调中的变量，这不是一个好习惯，所以我会使用第二个

$('.trigger').on('click', function() {
    $('.navigation').toggleClass("active");
});

注意：如果使用var在此添加变量，它将仅存在于回调函数

中

$('.trigger').on('click', function() {
    var $nav = $('.navigation')
    $nav.toggleClass("active");
});

同样在第一个使用event.preventDefault();的情况下，这将停止默认操作，您可以在此处阅读http://api.jquery.com/event.preventdefault/

Answer 2

当你需要多次调用相同的DOM元素时，你的第一个例子是有用的 - 查询DOM是一个昂贵的过程，所以如果你需要从中获取多次使用的东西，那就做一次并存储它在变量中。

如果你只需要完成一次这个功能，那么第二个例子是好的。它节省了代码行，更具人性化。

Answer 3

我会选择第二个。它看起来更干净，并没有留下很大的误解空间。它在时钟周期中略慢以使其每次点击检索导航项目，但除非您的用户实际上每秒点击数千次，否则这几个时钟周期都不会引人注目一点都不。

使用javascript切换Class onClick哪种方法更好？

3 个答案: