隐藏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>

Answer 2

我觉得你可能已经陷入杂草中，看起来这是一个相对简单的vanilla JavaScript任务。

请记住，jQuery是JavaScript，因此下面重做的代码中的任何内容都可以在您的代码中使用。我要引起注意的部分是使用.innerHTML.indexOf()检查元素内的输入文本。

＆＃13;

＆＃13;

(function() {
  attachEvent(document.querySelector(".filter"), "change", filterByInput);
  attachEvent(document.querySelector("input"), "keyup", filterByInput);

  var wraps = document.querySelectorAll(".wrap");

  function filterByInput() {
    var input = this.value;
    for (var i = 0; i < wraps.length; i++) {
      if (wraps[i].querySelector(".name").innerHTML.indexOf(input) < 0 && wraps[i].className.indexOf(input) < 0) {
        wraps[i].style.display = "none";
      } else {
        wraps[i].style.display = "";
      }
    }
  }

  function attachEvent(element, event, handler) {
    if (element.addEventListener) {
      element.addEventListener(event, handler);
    } else {
      element.attachEvent("on" + event, handler); // for old versions of IE
    }
  }
})();

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;