Question

我在页面上动态生成了<div>个元素，但我无法控制他们的行为。我有一个onclick Toggle功能，应显示/隐藏div面板。由于<div>是动态生成的，所有这些都保持相同的类/ ID，然后当我单击元素以启动函数时，Toggle函数将应用于页面上的所有元素而不是仅我点击的<div>。我知道这是因为它们都具有相同的ID /类但我该如何解决这个问题呢？

我有以下代码：

<div class='Button'>Click to slide the panel down or up</div>
<div class='Panel'>some form elements...</div>

以及以下jQuery：

$(document).ready(function(){
$(".Button").click(function(){
    $(".Panel").slideToggle("slow");
});

非常感谢任何帮助。

Answer 1

首先，请确保您的所有ID都是唯一的，它们必须是唯一的。其次，使用this关键字来引用被点击的元素：

$(".Button").click(function(){
    $(this).next(".Panel").slideToggle("slow");
});

这只会滑动切换单击的按钮div之后的Panel div，而不是所有的Panel div。

<强> jsFiddle example

Answer 2

您应该使用next

但我会使用checkbox + label + div + css来执行此操作（即不需要javascript）

Answer 3

为了使它更简单，您可以尝试使用下面的代码，使用$（this）将返回您单击的当前对象，并应用slideToggle将对已单击的项目起作用。没有任何需要next（）。

$(document).ready(function(){

$(".panel").click(function(){
    $(this).slideToggle("slow");
  
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='test1' class='panel'>test1</div>
<div id='test2' class='panel'>test2</div>
<div id='test3' class='panel'>test3</div>
<div id='test4' class='panel'>test4</div>

动态生成的<div> jQuery切换行为问题

3 个答案: