在数组中查找值并使用过滤器函数隐藏过滤后的元素

Question

我正在尝试过滤给定的结果列表。因此，我使用ul 列表作为过滤器选项的结果和复选框。

ul 列表中的项目带有data 属性。如果单击带有value="4711" 的复选框，则所有不具有data 属性和value="4711" 的li 都应从该列表中隐藏。

我完全坚持这一点，因为我对数组的工作了解不多。

var values = "";
var values_arr = [];
var data = "";
var data_arr = [];

function filterelements() {
  $("#filter input[type=checkbox]:checked").each(function() {
    values = $(this).value;
    values_arr.push(values);
  });

  $("#results li").each(function() {
    data = $(this).data("sample");
    data_arr = str.split(",");
  });

  console.log("Values: " + values_arr);
  console.log("Data attribute: " + data_arr);

  for (i = 0; i < values_arr.length; i++) {
    // Search in Array
    console.log('Index : ' + values_arr.indexOf(values));
    if (values_arr.indexOf(values) == -1) {
      console.log("not existing");
      $(this).parent("li").hide();
    }
  }
}

$("#filter :checkbox").on("click", function() {
  filterelements();
});

body {
  padding: 1rem;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type='text/javascript' src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<h4>Filter:</h4>
<div id="filter">
  <input type="checkbox" id="el_123" value="123"><label for="el_123">123</label>
  <input type="checkbox" id="el_9" value="9"><label for="el_9">9</label>
  <input type="checkbox" id="el_13" value="13"><label for="el_13">13</label>
</div>


<h4 class="mt-3">Results</h4>
<ul id="results">
  <li data-sample="123,17,24">Line 1</li>
  <li data-sample="13,26,12">Line 2</li>
  <li data-sample="123,9">Line 3</li>
  <li data-sample="13,17,2, 9">Line 4</li>
</ul>

<p>
  Description:<br>If a filter checkbox is clicked, all &lt;li&gt;'s should be hidden, that do not have the checkbox value in its data-attribute.
</p>

我目前的尝试可以在这里找到：https://www.bootply.com/9dXfEeXsWb。任何想法和建议如何从这里继续前进？

Answer 1

您应该检查更改事件侦听器中复选框的状态。如果选中使用.filter() 过滤没有在data-sample 中输入值的元素并隐藏它们。如果未选中则显示所有项目。

$("#filter :checkbox").change(function(){
  if ($(this).is(":checked")){
    var val = this.value;
    $("#results li").filter(function(){
      return $(this).data("sample").split(",").indexOf(val) == -1;
    }).hide();
  } else
    $("#results li").show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Filter:</h4>
<div id="filter">
    <input type="checkbox" id="el_123" value="123"><label for="el_123">123</label>
    <input type="checkbox" id="el_9" value="9"><label for="el_9">9</label>
    <input type="checkbox" id="el_13" value="13"><label for="el_13">13</label>
</div>
<h4 class="mt-3">Results</h4>
<ul id="results">
  <li data-sample="123,17,24">Line 1 (contain 123,17,24)</li>
  <li data-sample="13,26,12">Line 2 (contain 13,26,12)</li>
  <li data-sample="123,9">Line 3 (contain 123,9)</li>
  <li data-sample="13,17,2,9">Line 4 (contain 13,17,2,9)</li>
</ul>