Question

我一直在研究一个项目，在这里我可以使用搜索词过滤掉一些div框。例如，每个div包含一个数字，例如100、200或300。当我在搜索输入中输入250时，我需要它隐藏包含100和200的div，因为它们小于250。这有意义吗？

这是我到目前为止所做的：

<input type="text" id="search_value" onkeyup="search_filter()">

<div id="container">        
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">300</td>
        </tr>
    </table>
</div>  

<div id="container">        
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">250</td>
        </tr>
    </table>
</div>  
<div id="container">        
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">200</td>
        </tr>
    </table>
</div>      



function search_filter() {

  //Get Value of input & convert to Int 
            var s_value = document.getElementById("search_value").value;
            s_value = parseInt(s_value);

            //Get Value of in div and convert to Int
            var d_value = document.getElementById("div_value").innerHTML;
            d_value = parseInt(d_value);

            //Hide Divs

            if(s_value > d_value){
              $(function(){
                $(".container").hide();
                document.getElementsByTagName(".container")[0].setAttribute("class", "hide_container");
              });
            }
            else {
              $(function(){
                document.getElementsByTagName(".container")[0].setAttribute("class", "show_container");
              });
            };
       }

我觉得我需要使每个div都唯一，但是我不确定如何创建一长串的div容器列表，并在要隐藏的表上添加数字。

谢谢

Answer 1

您可以遍历类为 div_value 的所有 td ，以将文本与输入元素的值进行比较，以便可以根据条件隐藏/显示。

通过以下方式尝试使用jQuery的.each()：

function search_filter(input) {

  $('table tr td.div_value').each(function(){
    if(Number($(this).text()) >= Number(input.value))
      $(this).closest('.container').css({display: 'block'});
    else
      $(this).closest('.container').css({display: 'none'});
    
  });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search_value" onkeyup="search_filter(this)">

<div class="container">        
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">300</td>
        </tr>
    </table>
</div>  

<div class="container">        
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">250</td>
        </tr>
    </table>
</div>  
<div class="container">        
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">200</td>
        </tr>
    </table>
</div>

请注意： ：我建议您忽略内联事件侦听器。

$('#search_value').on('keyup', function(){
  var input = this;
  $('table tr td.div_value').each(function(){
    if(Number($(this).text()) >= Number(input.value))
      $(this).closest('.container').css({display: 'block'});
    else
      $(this).closest('.container').css({display: 'none'});
    
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search_value">

<div class="container">        
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">300</td>
        </tr>
    </table>
</div>  

<div class="container">        
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">250</td>
        </tr>
    </table>
</div>  
<div class="container">        
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">200</td>
        </tr>
    </table>
</div>

Answer 2

首先，您的大多数选择器都不正确。

请勿使用具有相同值的多个ID（容器）。如果需要相同的名称，请更改为类。

如果您可以使用jQuery，请在各处使用它，或者根本不使用它。

function search_filter() {

  //Get Value of input & convert to Int 
  var s_value = parseInt($("#search_value").val());

  $('.container').each((i, element) => {
    if (s_value > parseInt($(element).find('.div_value').text())) {
      $(element).hide();
      $(element).addClass('hide_container')
    } else {
      $(element).show();
      $(element).addClass('show_container')
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search_value" onkeyup="search_filter()">

<div class="container">
  <table class="information">
    <tr>
      <td class="key">Info</td>
      <td class="div_value">300</td>
    </tr>
  </table>
</div>

<div class="container">
  <table class="information">
    <tr>
      <td class="key">Info</td>
      <td class="div_value">250</td>
    </tr>
  </table>
</div>
<div class="container">
  <table class="information">
    <tr>
      <td class="key">Info</td>
      <td class="div_value">200</td>
    </tr>
  </table>
</div>

Answer 3

使用香草Javascript，我将以这种方式解决。

在input上的每个<input />事件中，遍历.div_value的列表，并相应地设置其closest('container')的{{1}}属性。

display

const valueDivs = [...document.querySelectorAll('.div_value')]
search_value.addEventListener('input', () => {
  for (const valueDiv of valueDivs) {
    valueDiv.closest('.container').style.display = 
      Number(valueDiv.textContent) >= Number(search_value.value) 
        ? 'block' 
        : 'none'
  }
})

Answer 4

这是一个在运行函数时使用forEach循环显示/隐藏div的示例。这使用香草javascript。

<input type="text" id="search_value" onkeyup="search_filter()">

<div class="container">       
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">300</td>
        </tr>
    </table>
</div>  

<div class="container">        
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">250</td>
        </tr>
    </table>
</div>  
<div class="container">        
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">200</td>
        </tr>
    </table>
</div>  



function search_filter() {

//Get Value of input & convert to Int 
var s_value = document.getElementById("search_value").value;
s_value = parseInt(s_value);

//Get Value of in div and convert to Int
var d_value_containers = document.querySelectorAll(".container");

// Loop through divs and hide divs that have a lower value than the search term
d_value_containers.forEach(function(container){
var d_value = container.querySelector(".div_value");  
var d_value_interger = parseInt(d_value.innerHTML);
  if(s_value > d_value_interger) {
    container.style.display = 'none';
  } else {
    container.style.display = 'block';
  }
});  
}

如何过滤掉包含数字到另一个数字的div？

4 个答案: