JQuery fadeOut仅适用于第一个元素

Question

我有一个包含其他div元素的div，它们都包含一个运行javascrip函数的锚标记（使用AJAX从表中删除一行）。实施例;

 <div id="container">
   <div><a id="btn" onclick="SomeFunction()">Delete</a></div>
   <div><a id="btn" onclick="SomeFunction()">Delete</a></div>
   <div><a id="btn" onclick="SomeFunction()">Delete</a></div>
   ... and so on
 </div>

然后我有这个Jquery代码;

  $("#btn").click(function() {
    $(this).parent("div").fadeOut();
  });

这应该淡出每个元素点击我的知识，但它只淡出第一个元素，如果我点击下一个元素按钮没有任何反应。

我没有广泛的JQuery知识来理解为什么会这样。

Answer 1

ID必须是唯一的，而是使用类。

<强> IDS

  

[...]元素只能通过id属性定义一个ID。请注意，一个元素可能有多个ID，但其他元素应该通过其他方式设置，例如通过与元素的DOM接口连接的脚本。

<强>类

  

类允许CSS和Javascript通过类选择器或类似DOM方法的函数选择和访问特定元素

Reference

示例

HTML：

<div id="container">
    <div><a class="btn" onclick="SomeFunction()">Delete</a></div>
    <div><a class="btn" onclick="SomeFunction()">Delete</a></div>
    <div><a class="btn" onclick="SomeFunction()">Delete</a></div>
</div>

jQuery的：

$(".btn").click(function() // Identify classes by a dot and the class attribute value.
{
    $(this).parent("div").fadeOut();
});

Working Demo

---

Offtopic：我推荐taking a look at .on()。

Answer 2

您在页面上只能有一个具有相同ID的元素。 jQuery变得混乱。改为使用类或属性选择器。