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

我觉得您可能已经因为在原始JavaScript中看起来相对简单的任务而陷入困境。

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

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

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