jQuery Multiple Toggle

Question

我的问题是，我有2 jQuery的切换，上面的一个完美的作品完美的原因为什么较低的一个不响应，因为HTML重复是否有任何方法可以使它们都工作，而无需更改类或ID （如：我不想每次我需要一个切换正在改变代码）

JS

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

CSS

#panel,#flip 
{ 
padding:5px; 
text-align:center; 
background-color:#e5eecc; 
border:solid 1px #c3c3c3; 
} 
#panel 
{ 
padding:50px; 
display:none; 
} 

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
<div id="flip">Click to slide the panel down or up</div> 
<div id="panel">Hello world!</div> 
<p> 
<div id="flip">Click to slide the panel down or up</div> 
<div id="panel">Hello world!</div> 
<p> 
<div id="flip">Click to slide the panel down or up</div> 
<div id="panel">Hello world!</div> 

Fiddle here

Answer 1

使用类而不是ID和修改你的脚本是这样的：

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

小提琴是here

Answer 2

使用类而不是ID的

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

jQuery的

$(".flip").each(function(){ 
    //Do stuff 
}); 

Answer 3

在这种情况下，你必须使用类，而不是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>** 

Answer 4

id s必须是唯一的，请使用.class es inste广告。

要切换的内容，请使用$('.flip').index(this)获得点击div的索引，然后使用.panel:eq($('.flip').index(this))目标需要被切换的元素。

$(document).ready(function() { 
 
    $("div.flip").click(function() { 
 
    $(".panel:eq(" + String(($('.flip').index(this)) + ")")).slideToggle("slow"); 
 
    }); 
 
});

.panel, 
 
.flip { 
 
    padding: 5px; 
 
    text-align: center; 
 
    background-color: #e5eecc; 
 
    border: solid 1px #c3c3c3; 
 
} 
 
.panel { 
 
    padding: 50px; 
 
    display: none; 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="flip">Click to slide Working</div> 
 
<div class="panel">Hello world!</div> 
 
<p> 
 
    <div class="flip">not Working</div> 
 
    <div class="panel">Hello world!</div> 
 
</p> 
 
<p> 
 
    <div class="flip">not Working</div> 
 
    <div class="panel">Hello world!</div> 
 
</p>is there a general way to make all of them work without making changes each time.

Answer 5

如果你有一个代码做类似slideToggle()然后用this关键字 但使用这个关键字，而不是使用ID的使用类，因为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> 

jQuery的

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