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

Answer 2

jQuery还提供了toggleClass方法。

Answer 3

JQuery中已经有一个toggleClass函数，它似乎可以满足您的需求。

Answer 4

尝试：

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

classnamehere将成为您的班级名称。

如何用on（）切换元素？

4 个答案: