Question

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

我现在所拥有的是：

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>

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>

如果您确实需要使用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>

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

1 个答案: