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

【问题标题】：Dynamically generated <div> jQuery toggle behaviour issue动态生成的 <div> jQuery 切换行为问题
【发布时间】：2023-03-13 04:11:01
【问题描述】：

我在页面上动态生成了<div> 元素，但我无法控制它们的行为。我有一个 onclick 切换功能，应该显示/隐藏 div 面板。由于<div>s 是动态生成的，它们都保持相同的类/ID，然后当我单击元素以启动该功能时，切换功能将应用于页面上的所有元素，而不是唯一的@我点击的 987654323@。我知道这是因为它们都具有相同的 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");
});

任何帮助将不胜感激。

【问题讨论】：

标签： jquery html css

【解决方案1】：

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

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

这只会滑动切换被单击的 Button div 后面的 Panel div，而不是所有 Panel div。

jsFiddle example

【讨论】：

【解决方案2】：

你应该使用next

但我会使用复选框 + 标签 + div + css 来执行此操作（即不需要 javascript）

【讨论】：

【解决方案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>

【讨论】：