Question

我一直致力于使用div过滤checkboxes的项目，到目前为止我已经开始工作，但我错过了一个难题。

当你选择例如Slider时，它会显示Slider的唯一选项。

如果您选择Full Width，则会显示Slider 和 Full Width

的所有选项

我想要的是仅显示 Slider和Full Width的选项，以便不会获得结果Fader和Full Width

希望这是有道理的

＆＃13;

$(document).ready(function() {

  var sections = $('.sectionContent');

  function updateContentVisibility() {
    var checked = $("#filterControls :checkbox:checked");
    if (checked.length) {
      sections.hide();
      checked.each(function() {
        $("." + $(this).val()).show();
      });
    } else {
      sections.show();
    }
  }

  $("#filterControls :checkbox").click(updateContentVisibility);
  updateContentVisibility();

});

＆＃13;

#filterControls label {
  display: block;
}
.box {
  height: 100px;
  background: #eee;
  width: 300px;
  text-align: center;
  line-height: 100px;
  margin: 5px;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="filterControls">
  <label><b>Image Header Type</b>
  </label>
  <label>
    <input type="checkbox" value="Slider" name="SliderCheck" />Slider</label>
  <label>
    <input type="checkbox" value="Fader" name="FaderCheck" />Fader</label>
  <label>
    <input type="checkbox" value="Static" name="StaticCheck" />Static</label>
  <label><b>Image Header Styles</b>
  </label>
  <label>
    <input type="checkbox" value="Full-Width" name="SliderCheck" />Full Width</label>
  <label>
    <input type="checkbox" value="Full-Screen" name="FaderCheck" />Full Screen</label>
  <label>
    <input type="checkbox" value="Arrow-Navigation" name="CustomCheck" />Arrow Navigation</label>
</div>

<div id="siteFilter">
  <div class="sectionContent box Slider Full-Width Full-Screen Arrow-Navigation" style="display: inline-block;">
    <a href="http://www.twelve.com.au/" target="_blank">Slider / Full Width</a>
  </div>
  <div class="sectionContent box Fader Full-Width Arrow-Navigation" style="display: inline-block;">
    <a href="http://www.galpins.com.au/" target="_blank">Fader / Full Width</a>
  </div>
  <div class="sectionContent box Static Full-Width" style="display: inline-block;">
    <a href="http://www.wmcaccounting.com.au/" target="_blank">Static / Full Width</a>
  </div>
</div>

＆＃13;

Answer 1

为了选择具有两个类的特定元素，您需要连接所有类，将它们与. s 无空格（如.class1.class2.class3分开）来实现您需要更新updateContentVisibility逻辑，请检查：

＆＃13;

$(document).ready(function() {

  var sections = $('.sectionContent');

  function updateContentVisibility() {
    var checked = $("#filterControls :checkbox:checked");
    if (checked.length) {
      sections.hide();
      var selectedClasses = "";
      checked.each(function() {
        selectedClasses += "." + $(this).val();

      });
      $(selectedClasses).show();
    } else {
      sections.show();
    }
  }

  $("#filterControls :checkbox").click(updateContentVisibility);
  updateContentVisibility();

});

＆＃13;

#filterControls label {
  display: block;
}
.box {
  height: 100px;
  background: #eee;
  width: 300px;
  text-align: center;
  line-height: 100px;
  margin: 5px;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="filterControls">
  <label><b>Image Header Type</b>
  </label>
  <label>
    <input type="checkbox" value="Slider" name="SliderCheck" />Slider</label>
  <label>
    <input type="checkbox" value="Fader" name="FaderCheck" />Fader</label>
  <label>
    <input type="checkbox" value="Static" name="StaticCheck" />Static</label>
  <label><b>Image Header Styles</b>
  </label>
  <label>
    <input type="checkbox" value="Full-Width" name="SliderCheck" />Full Width</label>
  <label>
    <input type="checkbox" value="Full-Screen" name="FaderCheck" />Full Screen</label>
  <label>
    <input type="checkbox" value="Arrow-Navigation" name="CustomCheck" />Arrow Navigation</label>
</div>

<div id="siteFilter">
  <div class="sectionContent box Slider Full-Width Full-Screen Arrow-Navigation" style="display: inline-block;">
    <a href="http://www.twelve.com.au/" target="_blank">Slider / Full Width</a>
  </div>
  <div class="sectionContent box Fader Full-Width Arrow-Navigation" style="display: inline-block;">
    <a href="http://www.galpins.com.au/" target="_blank">Fader / Full Width</a>
  </div>
  <div class="sectionContent box Static Full-Width" style="display: inline-block;">
    <a href="http://www.wmcaccounting.com.au/" target="_blank">Static / Full Width</a>
  </div>
</div>

＆＃13;

jQuery - 通过复选框问题

1 个答案: