Javascript JQuery停止单击事件

将

id

属性添加到

a

标记时，与之关联的事件将自动运行。如何阻止这种情况发生

有一个带有

的
标记。当我点击我正在添加一个id
时，显示所有
类。\35;隐藏所有
。现在我想，如果我点击该id，数据应该隐藏，但问题是它在点击
时运行。显示所有


代码如下：


$（“.show all”）。单击（函数（e）{
$（“.data”）.show（）；
$（此）.text（“全部隐藏”）；
$（this.removeClass（“全部显示”）；
$（this.attr（'id'，'hide all'）；
});
$（文档）。在（'单击'，“#全部隐藏”，函数（e）{
$（“.data”）.hide（）；
$（此）.text（“全部显示”）；
$（此）.removeAttr（“id”）；
$（此）.addClass（“全部显示”）；
});
.data{
显示：无；
}
a{
文字装饰：无；
颜色：红色；
}

全部展示

A1


A2


A3


A4

如果您只想隐藏/显示您的
，您可以使用
.toggle（）
并比较
.show all
类的文本内容


$（“.show all”）。单击（函数（e）{
$（“.data”）.toggle（）；
if（$（this）.text（）=“全部显示”）{
$（此）.text（“全部隐藏”）
}
else if（$（this）.text（）=“全部隐藏”）{
$（此）.text（“全部显示”）
}
});
.data{
显示：无；
}
a{
文字装饰：无；
颜色：红色；
}

全部展示

A1


A2


A3


A4

我认为您正在寻找一个toogle函数：

$('.toggle).on('click', function(e) {
    $(".data").toggle();
});

编辑：

问题是您已经将事件附加到元素。即使随后更改元素的类/id，事件仍将保持连接状态

但您可以将当前状态存储在变量中：

  var status = 0
  $(".btn").on("click", function() {
    if (status === 0) {
      $(this).html("Send Event 2");
      $("#output").html("Received Event 1");
      status = 1;
    } else {
      $(this).html("Send Event 1");
      $("#output").html("Received Event 2");
      status = 0;
    }
  });

请看这个Plunker：

如果您不喜欢变量的想法，可以在链接的数据属性中设置一个标志：

<a href="#" class=".btn" data-status="0"> 



然后，您可以在每次单击时使用jQuery更改数据状态属性。
我只需在同一个元素上执行两个绑定，因为它与您单击以执行显示和隐藏的操作相同：


$（“.show all”）。单击（函数（e）{
var link=$（this）；//缓存此项以获得更好的性能
如果（link.text（）==='Show all'）{
$（“.data”）.show（）；
link.text（“全部隐藏”）
.removeClass（“show all”）//您可以链接这些，不需要在每个
.attr（'id'，'hide all'）；//不知道您是否还需要这个
}否则{
$（“.data”）.hide（）；
link.text（“全部显示”）
.removeAttr（“id”）
.addClass（“全部显示”）；
}
});
.data{
显示：无；
}
a{
文字装饰：无；
颜色：红色；
}

全部展示

A1


A2


A3


A4

给你


$（“.show all”）。单击（函数（e）{
$（“.data”）.toggle（'fast'）；
if（$（this）.text（）=“全部隐藏”）{
$（此）.text（“全部显示”）；
}否则{
$（此）.text（“全部隐藏”）；
}
});
.data{
显示：无；
}
a{
文字装饰：无；
颜色：红色；
}

全部展示

A1


A2


A3


A4

试试这个


$（文档）.on（'click'，.show all'，函数（e）{
$（“.data”）.show（）；
$（此）.text（“全部隐藏”）；
$（this.removeClass（“全部显示”）；
$（this.attr（'id'，'hide all'）；
});
$（文档）。在（'单击'，“#全部隐藏”，函数（e）{
$（“.data”）.hide（）；
$（此）.text（“全部显示”）；
$（此）.removeAttr（“id”）；
$（此）.addClass（“全部显示”）；
});
.data{
显示：无；
}
a{
文字装饰：无；
颜色：红色；
}

全部展示

A1


A2


A3


A4



$（“.show all”）。单击（函数（e）{
if（$（this.attr（'id'）！='hide-all'）{
$（此）.text（“全部隐藏”）；
$（this.removeClass（“全部显示”）；
$（this.attr（'id'，'hide all'）；
$（“.data”）.show（）；
}
否则{
$（“.data”）.hide（）；
$（此）.text（“全部显示”）；
$（此）.removeAttr（“id”）；
$（此）.addClass（“全部显示”）；
}
});
.data{
显示：无；
}
a{
文字装饰：无；
颜色：红色；
}

全部展示

A1


A2


A3


A4

尝试使用
e.preventDefault（）
我尝试过它不起作用。你删除了class属性
show all
，因此单击以删除它是不起作用的。@t0mm13b但是如果我不删除它，那么当我单击时，打开“hide all first function only works”。你想每次单击它都显示/隐藏吗？这只是一个示例小提琴。我的主要目的是添加id，然后选择目标那个id。我刚刚以show hide为例。它只是一个示例小提琴。我的主要目的是添加id，然后瞄准那个id。我刚刚以show hide为例。它只是一个示例小提琴。我的主要目的是添加id，然后瞄准那个id。我刚刚以show hide为例。我不是在寻找show和hide。我想瞄准它attr id。这只是一个示例。我的主要目的是添加id，然后针对该id。我刚刚以show hide为例。