问题：

为什么我的Javascript过滤器只显示第一行

孟德曜

2023-03-14

大家好，我想问一下为什么我在Javascript上的过滤器只显示第一行，不能取消过滤？我是javascript的新手，我已经给了这个类一个数字来检查，但似乎不起作用，这是我的代码

null

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="height=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport">
    <title>Document</title>
    <style>

    </style>
    <!-- <script type="text/javascript" src="http://livejs.com/live.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- <script src="test2.js"></script> -->
    <script>
    function change() {
        let results = Array.from(document.querySelectorAll('.result > div')),
            modelsChecked = document.querySelectorAll('.filter input.models:checked'),
            processorsChecked = document.querySelectorAll('.filter input.processors:checked');
        // Hide all results
        results.forEach(function(result) {
            result.style.display = 'none';
        });
        // Filter results to only those that meet ALL requirements:        

        filterModelsOrProcessors(modelsChecked);

        if (processorsChecked.length != 0) {
            filterModelsOrProcessors(processorsChecked);
        }

        function filterModelsOrProcessors(modelsOrProcessorsChecked) {
            results = Array.from(modelsOrProcessorsChecked).reduce(function(sum, input) {
                const attrib = input.getAttribute('rel');
                return sum.concat(results.filter(function(result) {
                    return result.classList.contains(attrib);
                }));
            }, []);
        }
        // Show those filtered results:
        results.forEach(function(result) {
            result.style.display = 'block';
        });
    }
    change();
    </script>
</head>

<body>
    <div class="filter">
        <h1>Select models</h1>
        <div class="checkbox">
            <label>
                <input type="checkbox" rel="apple" class="models" onchange="change()" />Apple</label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" rel="samsung" class="models" onchange="change()" />Samsung</label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" rel="xiaomi" class="models" onchange="change()" />Xiaomi</label>
        </div>
        <h1>Select processors</h1>
        <div class="checkbox">
            <label>
                <input type="checkbox" rel="a9" class="processors" onchange="change()" />A9</label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" rel="a8" class="processors" onchange="change()" />A8</label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" rel="snapdragon" class="processors" onchange="change()" />Snapdragon</label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" rel="exynos" class="processors" onchange="change()" />Exynos</label>
        </div>
    </div>
    <div class="result">
        <div class="apple a9">
            <h1>iPhone 7</h1>
        </div>
        <div class="apple a8">
            <h1>iPhone 6</h1>
        </div>
        <div class="samsung exynos">
            <h1>Samsung s7</h1>
        </div>
        <div class="xiaomi snapdragon">
            <h1>Xiaomi Redmi note 4x</h1>
        </div>
    </div>
</body>

</html>

null

共有1个答案

贺亦

2023-03-14

你隐藏了所有的东西，不管天气是否检查了过滤器。如果更改发生时没有选中筛选器，则表示以前的筛选器已被删除，因此必须显示所有结果

null

function change() {
  let results = Array.from(document.querySelectorAll('.result > div')),
    modelsChecked = document.querySelectorAll('.filter input.models:checked'),
    processorsChecked = document.querySelectorAll('.filter input.processors:checked');
    
  // Start fresh, if nothing is checked this will display everything
  results.forEach(result => result.style.display = 'block');

  // Hide stuff that matches (only when there are filters)
  if (modelsChecked.length || processorsChecked.length) {
    // Hide all results
    results.forEach(result=> result.style.display = 'none');
    // Filter results to only those that meet ALL requirements:        
    filterModelsOrProcessors([...processorsChecked, ...modelsChecked]);

    function filterModelsOrProcessors(modelsOrProcessorsChecked) {
      results = results.filter(result => {
        return modelsOrProcessorsChecked.some(input => {
          const attrib = input.getAttribute('rel');
          return result.classList.contains(attrib);
        })
      });
    }
    // Show those filtered results:
    results.forEach(result => result.style.display = 'block');
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter">
  <h1>Select models</h1>
  <div class="checkbox">
    <label>
      <input type="checkbox" rel="apple" class="models" onchange="change()" />Apple
    </label>
  </div>
  <div class="checkbox">
    <label>
    <input type="checkbox" rel="samsung" class="models" onchange="change()" />Samsung
    </label>
  </div>
  <div class="checkbox">
    <label>
    <input type="checkbox" rel="xiaomi" class="models" onchange="change()" />Xiaomi
    </label>
  </div>
  <h1>Select processors</h1>
  <div class="checkbox">
    <label>
    <input type="checkbox" rel="a9" class="processors" onchange="change()" />A9
    </label>
  </div>
  <div class="checkbox">
    <label>
    <input type="checkbox" rel="a8" class="processors" onchange="change()" />A8
    </label>
  </div>
  <div class="checkbox">
    <label>
    <input type="checkbox" rel="snapdragon" class="processors" onchange="change()" />Snapdragon</label>
  </div>
  <div class="checkbox">
    <label>
    <input type="checkbox" rel="exynos" class="processors" onchange="change()" />Exynos</label>
  </div>
</div>
<div class="result">
  <div class="apple a9">
    <h1>iPhone 7</h1>
  </div>
  <div class="apple a8">
    <h1>iPhone 6</h1>
  </div>
  <div class="samsung exynos">
    <h1>Samsung s7</h1>
  </div>
  <div class="xiaomi snapdragon">
    <h1>Xiaomi Redmi note 4x</h1>
  </div>
</div>

类似资料：

为什么只显示我的第一个子报表？

我试图在一个Jasper报告中显示多个表，我使用子报告来实现这个功能。但我一直在显示几个子报告。实际上，只显示其中一个（第一个）。以下是我的主report.jrxml：下面是subjectSubreport.jrxml: 这是printersSubreport.jrxml：当我切换子报告时，第一个报告正确显示，另一个报告消失。在JasperSoft Studio中，一切都很好，当我将它们导出
为什么Angular日期过滤器显示错误的日期？

问题内容：我正在使用日期输入字段，并使用Angular在我的ui中格式化所选日期。但是格式化日期总是比所选日期少1天。为什么会这样，我该如何解决？ HTML： JS：我有一个小提琴来演示这个问题：http : //jsfiddle.net/wittersworld/uY3s9/ 编辑：我用一个有效的解决方案更新了小提琴：http : //jsfiddle.net/wittersworld/u
为什么d3时标只显示我00:00？

我是d3的新手，我正在尝试用它做一些数据可视化。我找到了一些关于如何在d3中创建时标的示例，但是当我按照示例尝试创建时标时，它失败了。我很沮丧，因为我想不出哪里出了问题...这个例子是这样的：如何使用d3.js在xAxis上格式化时间这里的一些绘图代码……，最后：然而，当我尝试时，我只能得到一个xAxis上的所有时间显示为“00:00”的图。这里出什么问题了？希望有人能帮帮我。谢谢！
什么是过滤器

过滤器是一种代码重用的技术，它可以转换 HTTP 请求的内容，响应，及头信息。过滤器通常不产生响应或像 servlet 那样对请求作出响应，而是修改或调整到资源的请求，修改或调整来自资源的响应。过滤器可以作用于动态或静态内容。这章说的动态和静态内容指的是 Web 资源。供开发人员使用的过滤器功能有如下几种类型：在执行请求之前访问资源。在执行请求之前处理资源的请求。用请求对象的自定义版本包
为什么我不能使用过滤器作为流中的最后一步

我一直被告知，不通过collect和findFirst等方法终止流是不好的做法，但没有真正的反馈，为什么在博客中没有太多关于它的内容。看看下面的示例，我没有使用大规模的嵌套 if 检查，而是使用 Optional 来取回 List 值。如您所见，我的最后一步是在该流中过滤。这对我来说是预期的，这是为了取回一个列表。为什么这是错误的，我应该如何写它？
为什么我的第二个按钮没有用Java显示

我的代码有问题。由于某些原因，它不会显示我的第二个按钮b2，并且我无法设置第一个按钮的大小。我想在中间有两个按钮，中间有一些空间。

为什么我的Javascript过滤器只显示第一行

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档