Question

目前，我有一个DIV，当你点击它时，会出现另一个DIV。工作良好。但是，如果我尝试在页面上添加相同的id再次执行效果，我什么也得不到。这是我的剧本：

<script>
$(document).ready(function(){
  $("#click").click(function(){
    $("#fade").fadeToggle();
  });
});
  </script>

然后在我的HTML中：

<div id="click">Click Here!
<div id="fade">CONTENT HERE
</div>
</div>

我说，工作正常，直到我再试一次。有没有办法做到这一点，所以我可以多次这样做，而不用不同的id重写脚本（必须有一个更有效的方式）

Answer 1

使用类而不是重复id并使用类选择器绑定事件并使用选择器中的上下文使用单击元素查找具有类fade的元素。

<div class="click">Click Here!
<div class="fade">CONTENT HERE
</div>
</div>


</<script>
$(document).ready(function(){
  $(".click").click(function(){
    $(".fade", this).fadeToggle();
  });
});
</script>div>

Answer 2

id必须在文档中是唯一的。来自documentation：

id = name [CS]   此属性为元素指定名称。 此名称在文档中必须是唯一的。

class = cdata-list [CS]   此属性为元素分配类名称或类名称集。可以为任意数量的元素分配相同的类名或名称。多个类名必须用空格字符分隔。

解决方案是将#click ID替换为.click类：

<强> HTML：

<div class="click">Click Here!
    <div class="fade">CONTENT HERE</div>
</div>

<强> jQuery的：

$(document).ready(function(){
  $(".click").click(function(){
    $(".fade", this).fadeToggle();
  });
});

同样#fade ID必须替换为.fade类，因为您在点击的元素（.fade）中选择了this。

JSFIDDLE

Answer 3

id =“YOUR_ID_NAME”是您文档中的uniq ID。

如果你想重用你的jquery那么你可以使用class

否则你可以在jquery中使用多个id

这是代码：

$(document).ready(function(){
  $("#click,#click1,#click2").click(function(){
    $(".fade", this).fadeToggle();
  });
});




<div class="click">Click Here!
    <div id="fade">CONTENT HERE</div>
</div>

<div id="click1">Click Here!
    <div class="fade">CONTENT HERE</div>
</div>

<div id="click2">Click Here!
    <div class="fade">CONTENT HERE</div>
</div>

为了更好地使用您的文档类。如果你想在你的jquery中重用。

$(document).ready(function(){
  $(".click").click(function(){
    $(".fade", this).fadeToggle();
  });
});


<div class="click">Click Here!
<div id="fade">CONTENT HERE
</div>
</div>

单击时显示DIV（多个区域）

3 个答案: