Javascript jQuery多重切换

我的问题是，我有两个jquery切换，上面的一个工作得很好，为什么下面的一个因为HTML的重复而没有响应？有没有办法让它们在不更改类或id的情况下工作（例如：我不想每次需要切换时都更改代码）

JS

CSS

HTML

单击以向下或向上滑动面板
你好，世界！

单击以向下或向上滑动面板
你好，世界！

单击以向下或向上滑动面板
你好，世界！

---

使用类而不是ID

<div class="flip"></div>
<div class="panel></div>
<div class="flip"></div>
<div class="panel"></div>

---

使用类而不是ID

<div class="flip"></div>
<div class="panel></div>
<div class="flip"></div>
<div class="panel"></div>

---

在这种情况下，您必须使用类而不是id。然后

$(document).ready(function() {
    $('.panel').hide();
    $('.flip').click(function() {
        $(this).closest('.panel').slideToggle(500);
    });
});

html代码是这样的

<div class"flip">Click to slide the panel down or up</div>
<div class"panel">Hello world!</div>
<p>
<div class"flip">Click to slide the panel down or up</div>
<div class"panel">Hello world!</div>
<p>
<div class"flip">Click to slide the panel down or up</div>
<div class"panel">Hello world!</div>**

单击可向下或向上滑动面板
你好，世界！

单击以向下或向上滑动面板
你好，世界！

单击以向下或向上滑动面板
你好，世界**

在这种情况下，您必须使用类而不是id。然后

$(document).ready(function() {
    $('.panel').hide();
    $('.flip').click(function() {
        $(this).closest('.panel').slideToggle(500);
    });
});

html代码是这样的

<div class"flip">Click to slide the panel down or up</div>
<div class"panel">Hello world!</div>
<p>
<div class"flip">Click to slide the panel down or up</div>
<div class"panel">Hello world!</div>
<p>
<div class"flip">Click to slide the panel down or up</div>
<div class"panel">Hello world!</div>**

单击可向下或向上滑动面板
你好，世界！

单击以向下或向上滑动面板
你好，世界！

单击以向下或向上滑动面板
你好，世界**

使用类而不是Id，并按如下方式修改脚本：

$(document).ready(function(){
    // all flip elements
    $(".flip").click(function(){
        // for each flip find next of type panel
        $(this).next('.panel').slideToggle("slow");
    });
});

---

Fiddle is

使用类而不是Id，并按如下方式修改脚本：

$(document).ready(function(){
    // all flip elements
    $(".flip").click(function(){
        // for each flip find next of type panel
        $(this).next('.panel').slideToggle("slow");
    });
});

---

Fiddle是

id

s必须是唯一的，请使用

.class

es

要切换内容，请使用

$（'.flip'）.index（this）

获取单击的

div的索引，然后使用
.panel:eq（$（'.flip'）.index（this））
以需要切换的元素为目标


$（文档）.ready（函数（）{
$（“div.flip”）。单击（函数（）{
$（“.panel:eq（“+字符串（$（'.flip'）.index（this））+”）.slideToggle（“慢”）；
});
});
.panel，
.翻转{
填充物：5px；
文本对齐：居中；
背景色：#e5eecc；
边框：实心1px#c3c3；
}
.小组{
填充：50px；
显示：无；
}

单击以滑动工作
你好，世界！

不起作用
你好，世界！


不起作用
你好，世界！
是否有一种通用的方法可以使所有这些功能都正常工作，而无需每次进行更改。
id
s必须是唯一的，请改用
.class
es

要切换内容，请使用
$（'.flip'）.index（this）
获取单击的
div的索引，然后使用
.panel:eq（$（'.flip'）.index（this））
以需要切换的元素为目标


$（文档）.ready（函数（）{
$（“div.flip”）。单击（函数（）{
$（“.panel:eq（“+字符串（$（'.flip'）.index（this））+”）.slideToggle（“慢”）；
});
});
.panel，
.翻转{
填充物：5px；
文本对齐：居中；
背景色：#e5eecc；
边框：实心1px#c3c3；
}
.小组{
填充：50px；
显示：无；
}

单击以滑动工作
你好，世界！

不起作用
你好，世界！


不起作用
你好，世界！
是否有一种通用方法可以使所有这些功能都正常工作，而无需每次进行更改。
如果必须在代码中执行类似的
slideToggle（）
，请使用
此
关键字
但是如果使用这个关键字而不是使用ID的use类，因为ID在一个页面中是唯一的，那么在一个页面中不能有两个同名的ID

div class"flip">Click to slide the panel down or up</div>
<div class"panel">Hello world!</div>
<p>
<div class"flip">Click to slide the panel down or up</div>
<div class"panel">Hello world!</div>
<p>
<div class"flip">Click to slide the panel down or up</div>
<div class"panel">Hello world!</div>

如果必须在代码中执行类似的
slideToggle（）
，请使用
this
关键字
但是如果使用这个关键字而不是使用ID的use类，因为ID在一个页面中是唯一的，那么在一个页面中不能有两个同名的ID

div class"flip">Click to slide the panel down or up</div>
<div class"panel">Hello world!</div>
<p>
<div class"flip">Click to slide the panel down or up</div>
<div class"panel">Hello world!</div>
<p>
<div class"flip">Click to slide the panel down or up</div>
<div class"panel">Hello world!</div>

您的标记无效…您不能使用重复的id。。这是错误的。在html中，每次不更改类或id的最好方法是什么？标记id应该是唯一的…而不是给元素相同的id，给它们相同的类名..然后在jquery选择器中使用类名。实际上，这是有效的，但每次我单击它们时它都会切换所有内容。请看这里，您的标记无效…您不能使用重复的id。。这是错误的。在html中，每次不更改类或id的最佳方法是什么？标记id应该是唯一的…而不是给元素相同的id，给它们相同的类名..然后在jquery选择器中使用类名。实际上，这是有效的，但每次我单击它们中的任何一个时，它都会切换所有内容。请看这里，如果我想同时切换div，该怎么办顶部似乎答案只适用于它旁边的div。是的，因为它使用next方法，所以它只对下一个元素有效。在前面查看将是.prev（）。更新后的小提琴包含中间的其他元素。在这种情况下，您可以使用更复杂的解决方案，比如数据属性，它包含相关的元素标识符，或者使用prevAll（'.panel'）-请参阅更新的fiddle：我在HTML中添加了一些代码，但它停止了工作。更新这里@ChrysUgwu你曾经使用过像jQuery这样的库吗？看来你根本不知道你在那里做什么。上一个和下一个查找同级-如果在其他元素中嵌套项，则它们不再是同级。该方法还提供了使用数据属性来设置任何类型的相关元素（您没有使用）的选项。我再一次修改了你的小提琴：（将类名移到parent元素）-我的建议，开始阅读和学习，或者雇佣一个能处理这类任务的人。如果我想在顶部切换一个div呢。似乎答案只适用于它旁边的div。是的，因为它使用next方法，所以它只对下一个元素有效。在前面查看将是.prev（）。更新后的小提琴包含中间的其他元素。在这种情况下，您可以使用更复杂的解决方案，比如数据属性，它包含相关的元素标识符，或者使用prevAll（'.panel'）-请参阅更新的fiddle：我在HTML中添加了一些代码，但它停止了工作。更新这里@ChrysUgwu你曾经使用过像jQuery这样的库吗？看来你根本不知道你在那里做什么。上一个和下一个查找同级-如果嵌套项