Question

当＃all-levels中单击具有相应索引的单选按钮时，此功能选择＃all-thumbnailnails中的单选按钮。我希望它不要这样做，如果父div包含一个隐藏的类，如下面的代码中的第二个div＃selection-thumbnails。

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

input {float: left;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/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="form  hidden">
  <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>
  <div class="form">
  <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>

因此，如果输入位于div =“hidden”的div内，我不希望单击该单选按钮。

Answer 1

您可以使用JQuery检查类。

 if($("#selector").hasClass('hidden'))

Answer 2

我假设你在父div中有hidden课程

$("#all-levels input").on('click', function(e) {
    if ($(this).closest('.hidden').length > 0) {
        e.preventDefault();
    } else {

        var index = $("#all-levels input").index(this);
        $("#all-thumbnails input").eq(index).click();
    }

})

Answer 3

你可以改变为

$( "#all-levels input" ).on('click', function(){
  var index = $( "#all-levels input" ).index(this);
  var c = $( "#all-thumbnails input").eq(index).parents()[1].className;
  if(!c.includes("hidden")){  
    $( "#all-thumbnails input").eq(index).click();
  } 
})

以下是工作代码https://jsfiddle.net/qsxtrkpm/

如果父div有一个“隐藏”类，则不运行函数

3 个答案: