jQuery动态切换 [英] jQuery toggle dynamically

问题描述

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

  $（。toggle）。click（function（）{
 $（this）.next（'。container'）。toggle（'fast'）; 
}）; 
  

我有这个（HTML）：

 < h4 class =toggle> 1< / h4> 
< h4 class =toggle> 2< / h4> 
< h4 class =toggle> 3< / h4> 
< div class =container> Content1< / div> 
< div class =container> Content2< / div> 
< div class =container> Content3< / div> 
  

当我点击FIRST元素（带类触发器的h4）时，我想要带有容器类的FIRST元素打开/关闭。

当我点击第二个切换类时，第二个容器类应该打开。

如果你需要/想保留这个DOM结构，你应该使用这个方法来实现这个功能。

index 。

  $（'。toggle'）。click（function （）{
 $（'。container'）。eq（$（this）.index（））。toggle（'fast'）; 
}）; 
  

参考：。eq（）， .index（）

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

I want to toggle divs dynamically. Here is what I found so far...

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

What I have is this (HTML):

<h4 class="toggle">1</h4>
<h4 class="toggle">2</h4>
<h4 class="toggle">3</h4>
<div class="container">Content1</div>
<div class="container">Content2</div>
<div class="container">Content3</div>

When I click the FIRST element (h4 with class toggle) I want the FIRST element with class container to open / close.

When I click the second toggle-class the second container-class should open.

The next in my example don't work.

解决方案

If you need/want to keep this DOM structure, you should use the index.

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

Ref.: .eq(), .index()

Example: http://www.jsfiddle.net/4yUqL/36/

这篇关于jQuery动态切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！