Question

我正在尝试过滤给定的结果列表。因此，我在结果中使用df = pd.DataFrame(columns=["a","b","c"]) df.loc[1] = [1,2,3] df.loc[2] = ["123.12", "3455.435",0] df.loc[3] = [23.2, 55.5,0.1] df.loc[4] = ["1.3","3.5","7.8"]列表，在过滤器选项中使用复选框。

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

我对此一无所知，因为我对数组的工作并不了解。

value="4711"

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;
}

我当前的尝试可以在这里找到：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>

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

1 个答案: