如果單擊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-levels div第三個元素，那么#all-thumbnails第三個元素也會被點擊。

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