JS関数の関数名とターゲットの自動インクリメント付き追加クラスまたはID番号

Question

クラス名+追加番号を受け取り、対応する番号の別のクラスに適用する方法を変更する方法が不思議でした。

私は今のところしているのは次のとおりです。

function hideSect() 
{ 
    if($('.trigger').is(":checked")) 
     $(".condition").hide(); 
    else 
     $(".condition").show(); 
} 

それが動的にTRIGGER1を取り、等の条件1、条件2にトリガ2、

関連HTMLに適用することができるように、私はそれを修正する方法を：そのHTMLレイアウトで

<input type="checkbox" class="trigger" onchange="hideSect()"><label><span>I do not wish to furnish this information.</span></label> 
<div class="condition"> 
    <!--Conditional content in here --> 
</div> 

Answer 1

、あなただけ

0 CSSを使用することができますあなただけのクラスの条件を持って次の兄弟を見つけることができるそれ以外

。

データ属性

$(".trigger").on("change", function(){ 
 
    var cb = $(this), 
 
     selector = cb.data("toggles"); 
 
    $(selector).first().toggle(!this.checked); 
 
    
 
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="checkbox" class="trigger" data-toggles="#f1" > 
 
<label><span>I do not wish to furnish this information.</span> 
 
</label> 
 
<div class="condition" id="f1"> 
 
    <p>Hello</p> 
 
    <!--Conditional content in here --> 
 
</div> 
 
<br/> 
 
<input type="checkbox" class="trigger" data-toggles="#f2" > 
 
<label><span>I do not wish to furnish this information.</span> 
 
</label> 
 
<div class="condition" id="f2"> 
 
    <p>Hello</p> 
 
    <!--Conditional content in here --> 
 
</div>

を使用するよりも、あなたは、HTMLレイアウトに頼ることができない場合は

$(".trigger").on("change", function(){ 
 
    $(this).nextAll(".condition").first().toggle(!this.checked); 
 
    
 
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="checkbox" class="trigger" > 
 
<label><span>I do not wish to furnish this information.</span> 
 
</label> 
 
<div class="condition"> 
 
    <p>Hello</p> 
 
    <!--Conditional content in here --> 
 
</div> 
 
<br/> 
 
<input type="checkbox" class="trigger" > 
 
<label><span>I do not wish to furnish this information.</span> 
 
</label> 
 
<div class="condition"> 
 
    <p>Hello</p> 
 
    <!--Conditional content in here --> 
 
</div>

そして、あなたが本当にIDを使用する必要がある場合は、あなたは何かをすることができます

$(".trigger").on("change", function(){ 
 
    var num = this.id.match(/\d+$/)[0]; 
 
    $("#f" + num).toggle(!this.checked); 
 
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="checkbox" class="trigger" ID="c1" > 
 
<label><span>I do not wish to furnish this information.</span> 
 
</label> 
 
<div class="condition" id="f1"> 
 
    <p>Hello</p> 
 
    <!--Conditional content in here --> 
 
</div> 
 
<br/> 
 
<input type="checkbox" class="trigger" id="c2" > 
 
<label><span>I do not wish to furnish this information.</span> 
 
</label> 
 
<div class="condition" id="f2"> 
 
    <p>Hello</p> 
 
    <!--Conditional content in here --> 
 
</div>