javascript - 在具有许多重复项的 jquery 中隐藏当前元素

Question

我试图在点击时隐藏当前元素，但我有许多相同 ID 的元素，我希望每个元素在每次点击时都隐藏。

我通常在 foreach 循环中使用 php 在每个 ID 上附加一个增量值，但在这种情况下我不能这样做。

我有这个:

<div id="container">
    <a href="#" id="hideme">hide me</a>
    SOME TEXT
</div>
<div id="container">
    <a href="#" id="hideme">hide me</a>
    SOME TEXT
</div>
<script type="text/javascript">
$("#hideme").click(function(){
    $(this).hide();
});
</script> 

在 jQuery 中有什么方法可以在点击时隐藏 CURRENT 元素吗？我当前的代码只会隐藏第一个元素。

示例:https://jsfiddle.net/2rnw224b/

Answer 1

您不应该有多个具有相同 ID 的元素，您应该使用类。您只需将事件监听器附加到具有该类名称的所有元素，并在单击时删除容器。

试试下面的例子。我也是updated your fiddle .

$('.hideme').click(function(e){
  e.preventDefault()
  $(this).hide()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
    <a href="#" class="hideme">hide me</a>
    SOME TEXT
</div>
<div class="container">
    <a href="#" class="hideme">hide me</a>
    SOME TEXT
</div>
<div class="container">
    <a href="#" class="hideme">hide me</a>
    SOME TEXT
</div>
<div class="container">
    <a href="#" class="hideme">hide me</a>
    SOME TEXT
</div>