javascript - 如何使用 on() 切换元素？

Question

我正在使用Hammer.js用于移动触摸事件的库以及在与 jQuery 一起使用的示例中，它们具有以下内容:

$('#test_el').hammer().on("tap", ".nested_el", function(event) {
    console.log(this, event);
});

这很简单；但是，我想将切换行为合并到#test_el。换句话说，如果将上面的示例替换为这样的内容:

$('button').hammer().on("tap", function() {
    $('div').addClass('open');
}, function {
   $('div').addClass('close');
});

如何让这种“切换”行为发挥作用？

Answer 1

最初，您可以向所有按钮添加起始类。然后在事件中，您可以检查该类是否存在。这可以让您知道点击元素时元素所处的状态。

$('button').addClass('close');

$('button').hammer().on('tap', function() {
  if ($(this).hasClass('close')) {
    $(this).removeClass('close').addClass('open');
    // Event code
  }
  else {
    $(this).removeClass('open').addClass('close');
    // Event code
  }
});