ユニバーサルjs divのグループ

Question

私はjsのスキルを持つ誰かのための本当に簡単な質問があります。私のような番号のIDを持つ要素を持っている：pictureframe-0、pictureframe-1、pictureframe-3を....と私は、下記の本に基づいたユニバーサルjsのようにしたい： "0" は、変量ます

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

を。解決していただきありがとうございます。

私が知っている、私は番号1〜20で20倍回のように、このスクリプトを複製するとき、それはseparetly作品：pictureframe-0は、カバー・0が有効になり、pictureframe-1は、カバー-1を活性化させるだろうなど

コードは次のようですこれは：

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

Answer 1

セレクタを変更してみてください。あなたはprefix属性セレクタを使用する場合は、ワイルドカードとして、IDの残りの部分を残して選択することができます：

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

はUPDATE：私はコメントで述べたように、はい、あなたもかかわらず、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); 
     }); 
    } 
});