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"); 
    }); 
});