divのラジオボタンをクリックすると、他のdivのラジオボタンがクリックされます

Question

誰かがこれを書く良い方法を教えてくれますか？ レベルとサムネイルのリストに追加する予定で、これを動的に動作させたいと思います。つまり、レベル15を選択した場合、すべてのサムネイルdivのレベル15が選択されます。現在のところ、スクリプトは限られており、作成するレベル/サムネイルの数だけ繰り返す必要があります。

$("#all-levels input:eq(0)").click(function() { 
 
    $("#all-thumbnails input:eq(0)").click(); 
 
}); 
 
$("#all-levels input:eq(1)").click(function() { 
 
    $("#all-thumbnails input:eq(1)").click(); 
 
});

input {float: left;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<div id="all-levels"> 
 
    <div class="level"> 
 
    <div class="level-container"> 
 
     <input name="level-expand" id="level-expand587" value="3587" type="radio"> 
 
    </div> 
 
    <label for="level-expand3587" onclick=""> 
 
     <div class="level-amount-container"> 
 
     $18.00 
 
     </div> 
 
     <div class="level-label-container"> 
 
     Chai 
 
     </div> 
 
    </label> 
 
    </div> 
 
<div class="level"> 
 
    <div class="level-container"> 
 
    <input name="level-expand" id="level-expand3589" value="3589" type="radio"> 
 
    </div> 
 
    <label for="level-expand3589" onclick=""> 
 
     <div class="level-amount-container"> 
 
     $25.00 
 
     </div> 
 
     <div class="level-label-container"> 
 
     Classic Frame 
 
     </div> 
 
    </label> 
 
    </div> 
 
</div> 
 

 
<p>&nbsp;</p> 
 
<div id="all-thumbnails"> 
 
    <div class="thumbnail-container"> 
 
    <label class="thumbnail-label" for="layout_id_1201"> 
 
     <img src="http://www.imagemagick.org/Usage/thumbnails/thumbnail.gif" alt="Chai" border="0"> 
 
    </label> 
 
    <input name="layout_id" id="layout_id_1201" value="1201" type="radio"> 
 
    </div> 
 
    <div class="thumbnail-container"> 
 
    <label class="thumbnail-label" for="layout_id_2456"> 
 
     <img src="https://mediaarchive.cern.ch/MediaArchive/Video/Public/Movies/CERN/2013/CERN-MOVIE-2013-051/CERN-MOVIE-2013-051-010/CERN-MOVIE-2013-051-010-thumbnail-135x101-at-5-percent.jpg" alt="Chai" border="0"> 
 
    </label> 
 
    <input name="layout_id" id="layout_id_2456" value="2456" type="radio"> 
 
    </div> 
 
</div>

現在のスクリプトは、すべてのサムネイルdivの中に対応するラジオボタンをクリックします。 eq：（0）、eq：（1）、eq：（2）などを書かずにこれを行う方法はありますか？それで、いくつのレベルとサムネイルを追加しても動的に動作します。

サイドノート：重要な場合は、サムネイルセクションがフロントエンドユーザーから表示されなくなります。

Answer 1

あなたはクリックされた要素の位置インデックスを見つけて、ちょうど得たインデックスを別のdivから入力要素に問い合わせることができます。したがって、#all-levelsdivの3番目の要素をクリックすると、#all-thumbnailsの3番目の要素も同様にクリックされます。

$("#all-levels input").on('click', function(){ 
    var index = $("#all-levels input").index(this); 
    $("#all-thumbnails input").eq(index).click(); 
})