javascript - 根据用户输入隐藏 Div

Question

有 1 个用户输入文本框和一个内部数组。

当用户输入“ha”时，所有不包含“ha”的内容都应该隐藏。

每当触发输入时，就会调用一个函数来隐藏和显示。我无法获取输入文本来选择包含它们的文本。

jQuery(function($) {
  $(".filter").change(function() {
    display_function();
  });
  $('input').on('input', function() {
    display_function();
  });

  function display_function() {
    var input = $('input').val();
    $(".wrap").each(function() {
      if ($(this).hasClass($("option:selected").val())) {
        if (1) {
          console.log($(this).children(".name").is(":contains('" + input + "')"));
          $(this).show();
        } else {
          $(this).hide();
        }
      } else {
        $(this).hide();
      }

    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=text>
<select class="filter">
  <option value="0">Select..</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<div class="wrap 0 1">
  <h1 class="name">ha</h1>
</div>
<div class="wrap 0 2">
  <h1 class="name">hahaha</h1>
</div>
<div class="wrap 0 4">
  <h1 class="name">zxza</h1>
</div>
<div class="wrap 0 4">
  <h1 class="name">zzss</h1>
</div>
<div class="wrap 0 1">
  <h1 class="name">aasss</h1>
</div>
<div class="wrap 0 4">
  <h1 class="name">hahaa</h1>
</div>
<div class="wrap 0 1">
  <h1 class="name">hahaha</h1>
</div>
<div class="wrap 0 3">
  <h1 class="name">haa</h1>
</div>
<div class="wrap 0 2">
  <h1 class="name">ahhh</h1>
</div>
<div class="wrap 0 1">
  <h1 class="name">sss</h1>
</div>

Answer 1

如果我理解你需要这样的东西:

jQuery(function($) {
  $(".filter").change(function() {
    display_function();
  });
  $('input').on('input', function() {
    display_function();
  });

  function display_function() {
    var input = $('input').val();
    $(".wrap").each(function() {
      var myvalue = $(this).find("h1").html();
      if ($(this).hasClass($("option:selected").val())) {
        if (new RegExp(input).test(myvalue)) {
          console.log($(this).children(".name").is(":contains('" + input + "')"));
          $(this).show();
        } else {
          $(this).hide();
        }
      } else {
        $(this).hide();
      }

    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=text>
<select class="filter">
  <option value="0">Select..</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<div class="wrap 0 1">
  <h1 class="name">ha</h1>
</div>
<div class="wrap 0 2">
  <h1 class="name">hahaha</h1>
</div>
<div class="wrap 0 4">
  <h1 class="name">zxza</h1>
</div>
<div class="wrap 0 4">
  <h1 class="name">zzss</h1>
</div>
<div class="wrap 0 1">
  <h1 class="name">aasss</h1>
</div>
<div class="wrap 0 4">
  <h1 class="name">hahaa</h1>
</div>
<div class="wrap 0 1">
  <h1 class="name">hahaha</h1>
</div>
<div class="wrap 0 3">
  <h1 class="name">haa</h1>
</div>
<div class="wrap 0 2">
  <h1 class="name">ahhh</h1>
</div>
<div class="wrap 0 1">
  <h1 class="name">sss</h1>
</div>