jQuery动态切换

我想动态切换div。 这是我到目前为止发现的……

$(".toggle").click(function() { $(this).next('.container').toggle('fast'); }); 

我有这个（HTML）：

 
1
 
2
 
3
 
Content1
 
Content2
 
Content3 

当我单击FIRST元素（带有类切换的h4）时，我希望带有类容器的FIRST元素打开/关闭。

当我单击第二个toggle-class时，第二个容器类应该打开。

我的例子中的下一个不起作用。

Answer 1

如果您需要/想要保留此DOM结构，则应使用index 。

 $('.toggle').click(function() { $('.container').eq($(this).index()).toggle('fast'); }); 

参考： .eq（） ,. index（）

示例： http ： //www.jsfiddle.net/4yUqL/36/

Answer 2

我想你要找的是

 $(".toggle").click(function() { $($('.container')[$(this).index(".toggle")]).toggle('fast'); }); 

工作小提琴

Answer 3

您可以尝试JQuery的切换function 。 而且我宁愿在标题和内容div之间有一些其他的依赖关系，而不是信任它们出现的顺序。

Answer 4

如果你改变你的HTML的顺序：

 
1
 
Content1
 
2
 
Content2
 
3
 
Content3 

你的代码是有效的，因为它只是获取下一个DOM元素并在它与类匹配时切换它。 然而，这是非常不稳定的，其他人的例子告诉js更具体地做什么会更好。