如果单击div中的单选按钮,则单击其他div中的相应单选按钮

时间:2017-04-04 04:21:24

标签: javascript jquery html

有人可以用更好的方式来帮助我吗? 所以我们将添加到级别和缩略图列表中,我希望它能够动态地工作。所以说如果你选择了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)等的情况下执行此操作,这样无论添加多少级别和缩略图,它都会动态工作?

旁注:如果重要的话,缩略图部分将对前端用户隐藏。

1 个答案:

答案 0 :(得分:3)

你可以找到被点击的元素的位置索引,然后只用你刚刚获得的索引查询另一个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();
})