在JS函數參數和目標中自動增加附加類或ID號

Question

我想知道如何修改一個函數，該函數採用類名+附加數字並應用於具有相應數字的另一個類。

我有地方現在是：

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

我將如何修改它，以便它可以動態地採取TRIGGER1，並適用於條件1，觸發2到條件2等

相關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

隨着該HTML佈局，你可以使用CSS

input.trigger:checked + label + div { 
 
    display: none; 
 
}

<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>

以外，你可以只發現有類條件的下一個同級。

$(".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>

如果你不能依靠HTML佈局，除了使用數據屬性

$(".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>

如果你真的需要使用IDS，你可以做點像

$(".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>