2017-04-04 67 views
1

有人可以帮助我更好的方式来写这个? 因此,我们将添加到级别和缩略图的列表,我希望这个动态工作。所以说,如果你选择了15级,那么全部缩略图div中的15级将被选中。目前我有一个脚本是有限的,必须重复我们创建的级别/缩略图的数量。如果DIV单选按钮,单击,然后在相应的其他分区单选按钮被点击

$("#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)等,使添加不管有多少水平和缩略图,它将动态地工作?

备注:如果重要,缩略图部分将从前端用户隐藏。

回答

3

那么你会发现它被点击,然后只需查询从另一个div与你刚拿到指标输入元素元素的位置索引。所以,如果你在#all-levelsdiv点击第三个要素,然后在#all-thumbnails第三个元素将获得点击为好。

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