Question

所以我写了一个HTML页面，当点击一个名字时，该名称会淡出。代码看起来像这样

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#names").click(function(){
        $(this).fadeOut();
    });
});
</script>
</head>
<body>

<p id = "names">John Doe</p>
<p id = "names">Jane Doe</p>

</body>
</html>

＆＃13;

＆＃13; 每次我运行它我只能点击一个名字...我希望能够点击每个名字，以便它们都消失...任何建议??

Answer 1

您未正确使用html id属性。如果您有多个条目，则需要使用class属性，而不是id。 $("#names")只会抓取所选的第一个元素并将事件监听器应用于它。

您想将其转换为类，以便所有元素都应用于侦听器

$(document).ready(function() {
  $(".names").click(function() {
    $(this).fadeOut();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="names">John Doe</p>
<p class="names">Jane Doe</p>

Answer 2

您必须拥有元素的唯一ID。

当你编写一个通用代码时，必须对许多元素采取行动使用类来简化生活。

示例代码段

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".names").click(function(){
        $(this).fadeOut();
    });
});
</script>
</head>
<body>

<p class = "names">John Doe</p>
<p class = "names">Jane Doe</p>

</body>
</html>

您当前行为的原因：当您使用$('#name')时，Jquery将只选择具有从DOM顶部解析的id的第一个元素。因此您只将事件绑定到第一个元素。将其更改为使用类，这将导致选择具有指定类的所有元素..

Answer 3

您不能在单个页面中使用重复的ID。它无效。改为使用类。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".names").click(function(){
        $(this).fadeOut();
    });
});
</script>
</head>
<body>

<p class = "names">John Doe</p>
<p class = "names">Jane Doe</p>

</body>
</html>

jQuery .Click（）函数不会多次触发

3 个答案: