JQuery fadeOut仅适用于第一个元素

JQuery fadeOut only works on first element

本文关键字：第一个 元素 适用于 fadeOut JQuery      更新时间：2023-09-26

我有一个包含其他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知识来理解为什么会发生这种情况。

Id必须是唯一的，请改用类

Ids

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

类

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

参考

示例

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

工作演示

主题：我建议看一下.on（）.

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

相关文章：