羣組divs的通用js

Question

對於擁有js技能的人來說，我有一個非常簡單的問題。我有編號的ID，如元素：PictureFrame指令-0，PictureFrame指令-1，PictureFrame指令-3 ....我想使基於這種普遍低於JS：

$(document).ready(function() {$("#pictureframe-0").hover(function() { 
     $("#cover-0").slideDown(500); 
    }, function() { 
     $("#cover-0").slideUp(500); 
    }); 
}); 

，其中 「0」 將變動內容。感謝您的解決方案。

我知道，當我重複這個劇本就像數字1-20 20X倍它的工作原理separetly：PictureFrame指令-0將激活蓋-0，PictureFrame指令-1將激活蓋-1等

代碼是這樣這：

 <div class="pictureframe"> 
       <div class="cover">this is cover</div>   
     </div> 

Answer 1

嘗試更改您的選擇器。如果您使用前綴屬性選擇，你可以選擇離開ID的其餘部分作爲通配符：

$(document).ready(function() {$("[id^=pictureframe-]").hover(function() { 
     $("#cover-" + this.id.slice(-1)).slideDown(500); 
    }, function() { 
     $("#cover-" + this.id.slice(-1)).slideUp(500); 
    }); 
}); 

更新：正如我在評論中提到的，是的，你也可以做到這一點使用一個for循環，雖然我個人比較喜歡第一種方式：

$(document).ready(function() { 
    for (let i = 0; i < $("[id^=pictureframe-]").length; i++) { 
     $("#pictureframe-" + i).hover(function() { 
      $("#cover-" + i).slideDown(500); 
     }, function() { 
      $("#cover-" + i).slideUp(500); 
     }); 
    } 
});