親divのクラスが「非表示」の場合、機能は実行されません。

Question

この機能は、対応するインデックスのラジオボタンが＃すべてのレベルでクリックされると、＃すべてのサムネイルのラジオボタンを選択します。親のdivに2番目の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要素の内部にある場合ので、私はラジオボタンがクリックされることを望んでいません。

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

コード https://jsfiddle.net/qsxtrkpm/

に取り組んでいる。ここ

$("#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(); 
    } 
}) 

をfolllowsとしてあなたが変更することができます