如何单独获取数组的每个值和运行一个具有未知数量值的函数

Question

我是 jQuery 的新手，我很难从我的数组中单独获取所有值并运行 .toggle() [=16] =]

对于我拥有的每个复选框，我都有一个 <div> 元素，其 ID 与相应复选框的值相同。我想允许用户勾选任意数量的复选框，并且每个复选框和内容片段都会被切换。

我怎样才能做到这一点？正如您在控制台的输出中看到的那样，它输出整个数组 x 勾选的复选框的数量。

jQuery(document).ready(function ($) {
  $('.ghb_toggle').hide()
    $("#GHB_Form").on('submit', function() {
        var allVals = [];
        $.each($("input[name='GHB_checkbox']:checked"), function() {
            allVals.push($(this).val());
        });
        
        $(allVals).each(function() {
            console.log(allVals);
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<form id="GHB_Form" onsubmit="return false;">
   <input name="GHB_checkbox" type="checkbox" value="#design-for-your-climate">
   <label>Design for your climate</label><br>
   <input name="GHB_checkbox" type="checkbox" value="#placement-considerations">
   <label>Placement considerations</label><br>
   <input name="GHB_checkbox" type="checkbox" value="#overall-aesthetics">
   <label>Overall aesthetics</label><br>
   <input name="GHB_checkbox" type="checkbox" value="#performance">
   <label>Performance</label><br>
   <input name="GHB_checkbox" type="checkbox" value="#foundations">
   <label>Foundations</label><br>
   <input name="GHB_checkbox" type="checkbox" value="#flooring">
   <label>Flooring</label><br>
   <button type="submit">Submit</button>
</form>

<div class="ghb_toggle" id="design-for-your-climate">Design for your climate</div>
<div class="ghb_toggle" id="placement-considerations">Placement considerations</div>
<div class="ghb_toggle" id="overall-aesthetics">Overall aesthetics</div>
<div class="ghb_toggle" id="performance">Performance</div>
<div class="ghb_toggle" id="foundations">Foundations</div>
<div class="ghb_toggle" id="flooring">Flooring</div>

Answer 1

each 循环将公开一个索引（当前循环中元素的第 n 个）和当前索引的值。后者将是您切换元素的选择器。

$(allVals).each(function(index, value) {
  $(value).show();
});

在这样做之前，请再次隐藏所有切换以重置它们。否则，当您多次提交时，它们将保持可见。

jQuery(document).ready(function ($) {
  $('.ghb_toggle').hide()
  $("#GHB_Form").on('submit', function() {
      var allVals = [];
      $.each($("input[name='GHB_checkbox']:checked"), function() {
          allVals.push($(this).val());
      });

      // First hide everything again.
      $('.ghb_toggle').hide()

      $(allVals).each(function(i, value) {
          $(value).show();
      });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<form id="GHB_Form" onsubmit="return false;">
   <input name="GHB_checkbox" type="checkbox" value="#design-for-your-climate">
   <label>Design for your climate</label><br>
   <input name="GHB_checkbox" type="checkbox" value="#placement-considerations">
   <label>Placement considerations</label><br>
   <input name="GHB_checkbox" type="checkbox" value="#overall-aesthetics">
   <label>Overall aesthetics</label><br>
   <input name="GHB_checkbox" type="checkbox" value="#performance">
   <label>Performance</label><br>
   <input name="GHB_checkbox" type="checkbox" value="#foundations">
   <label>Foundations</label><br>
   <input name="GHB_checkbox" type="checkbox" value="#flooring">
   <label>Flooring</label><br>
   <button type="submit">Submit</button>
</form>

<div class="ghb_toggle" id="design-for-your-climate">Design for your climate</div>
<div class="ghb_toggle" id="placement-considerations">Placement considerations</div>
<div class="ghb_toggle" id="overall-aesthetics">Overall aesthetics</div>
<div class="ghb_toggle" id="performance">Performance</div>
<div class="ghb_toggle" id="foundations">Foundations</div>
<div class="ghb_toggle" id="flooring">Flooring</div>

如何单独获取数组的每个值和运行一个具有未知数量值的函数

How to get each value of an array individually and run a function on it with an unknown number of values

html

javascript

arrays

jquery

toggle

如何单独获取数组的每个值和 运行 一个具有未知数量值的函数

How to get each value of an array individually and run a function on it with an unknown number of values

html

javascript

arrays

jquery

toggle

如何单独获取数组的每个值和运行一个具有未知数量值的函数