這可以轉換爲多個（20+）實例嗎？

Question

我對這個常見問題使用此代碼。您點擊img並打開框，點擊img也會關閉框。 img切換每次點擊。到目前爲止，我還無法將其轉換爲超過1個部分。我對jquery或javascript一無所知，但瞭解一些編程概念。我一直在嘗試4個小時，但沒有運氣。我需要你的幫助！

$(document).ready(function() { 
$('#expandcontract').toggle(
function(){ // you can add as much here as you'd like 
$('#box').show('slow'); 
$('#imgArrows').attr("src","images/up.png"); 
}, function() { // same here 
$('#box').hide('slow'); 
$('#imgArrows').attr("src","images/down.png"); 
}); 
}); 

Answer 1

ID只應提供給一個元素。您將需要分配元素類，然後使用適當的類檢索所有元素，並向它們添加切換處理程序。

Answer 2

改變所有標識的上課後，你可能想是這樣的：

$(document).ready(function() { 
    $('.expandcontract').toggle(
     function() { 
      $('.box',this).show('slow'); 
      $('.imgArrows',this).attr("src","images/up.png"); 
     }, function() { 
      $('.box',this).hide('slow'); 
      $('.imgArrows',this).attr("src","images/down.png"); 
     } 
    ); 
}); 

假設你的HTML是一樣的東西：

<div class="expandcontract"> 
    <div class="box" /> 
    <div class="imgArrows" /> 
</div> 
<div class="expandcontract"> 
    <div class="box" /> 
    <div class="imgArrows" /> 
</div> 
<div class="expandcontract"> 
    <div class="box" /> 
    <div class="imgArrows" /> 
</div>