1

目前，我有一个 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 重写脚本（必须有比这更有效的方法）

4

3 回答 3

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>
于 2013-08-19T12:58:24.360 回答
1

id 在文档中必须是唯一的。从文档：

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

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

解决方案是将#clickid替换为.clickclass：

HTML：

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

jQuery：

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

id也#fade必须替换为.fadeclass，因为您.fade在单击的元素 ( this) 内部进行选择。

JSFIDDLE

于 2013-08-19T12:58:47.657 回答
0

id="YOUR_ID_NAME"是您文档中的唯一 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>
于 2013-08-19T13:12:03.743 回答