自动增加JS函数参数和目标中附加的类或ID号

Auto increment appended class or ID number in JS function parameter and target

本文关键字：ID 目标 增加 JS 函数 参数      更新时间：2023-09-26

我想知道如何修改一个函数，它需要一个类名+附加的数字，并应用于另一个类具有相应的数字。

我现在的位置是:

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

我如何修改它，使它可以动态地将trigger1应用于condition1，将trigger2应用于condition2，等等

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

有了这个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布局，那么使用data属性

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

如果你真的需要使用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>

相关文章：