Question

我正在尝试使用复选框列表作为过滤器来显示和隐藏具有特定数据属性值的项目。由于某种原因，我无法弄清或找到一个示例。当然应该有些容易。我或多或少希望显示与复选框值匹配的所有元素，甚至是多选项目。因此，在下面的示例中。我想要显示绿色的任何东西，然后显示橙色的任何东西。但是我也要用绿色和橙色来表示它们。

我们非常感谢您的帮助。

示例：

我的元素

 <div id="myFilters">
<label><input type="checkbox" value="red" name="colorCheckbox">red</label>

<label><input type="checkbox" value="orange" name="colorCheckbox">orange</label>
<label><input type="checkbox" value="green" name="colorCheckbox">green</label>
  </div>

 <div data-type="red green"></div>
 <div data-type="red orange green"></div>
 <div data-type="red orange"></div>

我的jQuery

 $('input[type="checkbox"]').click(function(){

   var inputValue = $(this).attr("value");
    $("div[data-type=" + inputValue).show();
     $('div:not([data-type=' + inputValue).hide();
  });

我有一个带有当前代码的JSFiddle。

https://jsfiddle.net/azm58kxf/1/

Answer 1

单击时，从每个选中的复选框值构造一个数组。然后，遍历data-type div，并检查其type includes是否在数组中有任何字符串-如果是，则显示div，否则将其隐藏：

const $checkboxes = $('#myFilters input[type="checkbox"]')
$checkboxes.click(function() {
  const substringsToShow = $checkboxes.filter(':checked')
    .map((_, elm) => elm.value)
    .get();
  $('.datas').each(function() {
    const $this = $(this);
    const type = $this.data('type');
    if (substringsToShow.some(show => type.includes(show))) {
      $this.show();
    } else {
      $this.hide();
    }
  });
});

.datas {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myFilters">
  <label><input type="checkbox" value="red" name="colorCheckbox">red</label>

  <label><input type="checkbox" value="orange" name="colorCheckbox">orange</label>
  <label><input type="checkbox" value="green" name="colorCheckbox">green</label>
</div>

<div class="datas" data-type="red green">redgreen</div>
<div class="datas" data-type="red orange green">redorangegreen</div>
<div class="datas" data-type="red orange">redorange</div>

jQuery复选框列表显示包含数据的项目

1 个答案: