javascript - 产品过滤器 - 根据选中/取消选中的多个复选框显示结果-6ren

javascript - 产品过滤器 - 根据选中/取消选中的多个复选框显示结果

转载作者：行者123 更新时间：2023-12-04 03:42:12

我正在构建一个产品过滤器，以根据分辨率、响应时间、品牌等规范缩小显示器的选择范围。

我为每个结果创建了 div，规范是类。

每个复选框都有一个值属性。选中时，此属性存储在 map 对象中。这样一来，当我取消选中一个复选框时，它就会从 map 对象中删除，反之亦然。

map 对象的结果用“.”连接在一起。从那时起存储在变量 assignedTo 中，这会被记录下来，这样您就可以看到哪些已被选中。

我现在的问题是如何显示所有包含存储在 assignedTo 中的类的 div？

我试过使用 document.querySelectorAll 然后通过显示 block 循环遍历它，但有两个问题:

我收到“未捕获的语法错误:无法在‘文档’上执行‘querySelectorAll’:‘...’不是有效的选择器”
如果我成功循环并显示每个结果，如果我取消选中一个框，我如何让该结果消失？

$(document).ready(function() {
  $(':checkbox[type="checkbox"]').on('change', function() {
    var assignedTo = $(':checkbox[type="checkbox"]:checked').map(function() {
        return $(this).attr('value');
      })
      .get().join(".");
    console.log(assignedTo);
    document.querySelectorAll("div.result." + assignedTo).forEach(div => div.style.display = "block")
  });
});

.result {
  width: 100%;
  border: 1px solid black;
  padding: 20px;
  line-height: 20px;
  text-align: left;
  margin: 10px;
  float: left;
  font-size: 11px;
  color: #000;
  font-family: sans-serif;
  display: none;
}

div.results {
  width: 70%;
  display: inline;
  float: left;
  position: relative;
  padding-right: 10%;
}

div#filters {
  width: 20%;
  display: inline;
  float: left;
  position: relative;
}

.btn {
  background-color: #0077ce;
  color: #fff;
  font-weight: bold;
  border-radius: 10px;
  padding: 10px;
  display: inline-block;
  position: relative;
  float: right;
}

.btn:hover {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <title>Test</title>
</head>

<body>
  <h1>Find your monitor</h1>
  <div id="filters">
    <h3>Recommended For</h3>
    <ul class="recommended">
      <li>
        <input type="checkbox" value="home" id="filter-home" />
        <label for="filter-home">Home</label>
      </li>
      <li>
        <input type="checkbox" value="office" id="filter-office" />
        <label for="filter-office">Office</label>
      </li>
      <li>
        <input type="checkbox" value="gaming" id="filter-gaming" />
        <label for="filter-gaming">Gaming</label>
      </li>
    </ul>
    <h3>Size</h3>
    <ul class="-monitor-size">
      <li>
        <input type="checkbox" value="24inch" id="filter-24inch" />
        <label for="filter-24inch">24inch</label>
      </li>
      <li>
        <input type="checkbox" value="32inch" id="filter-32inch" />
        <label for="filter-32inch">32inch</label>
      </li>
      <li>
        <input type="checkbox" value="40inch" id="filter-40inch" />
        <label for="filter-40inch">40inch</label>
      </li>
    </ul>
    <h3>Resolution</h3>
    <ul class="monitor-resolution">
      <li>
        <input type="checkbox" value="1080p" id="filter-1080p" />
        <label for="filter-1080p">1080p</label>
      </li>
      <li>
        <input type="checkbox" value="4K" id="filter-4K" />
        <label for="filter-4K">4K</label>
      </li>
      <li>
        <input type="checkbox" value="5K" id="filter-5K" />
        <label for="filter-5K">5K</label>
      </li>
    </ul>
    <h3>Response Time</h3>
    <ul class="monitor-responsetime">
      <li>
        <input type="checkbox" value="1ms" id="filter-1ms" />
        <label for="filter-1ms">1ms</label>
      </li>
      <li>
        <input type="checkbox" value="5ms" id="filter-5ms" />
        <label for="filter-5ms">5ms</label>
      </li>
      <li>
        <input type="checkbox" value="10ms" id="filter-10ms" />
        <label for="filter-10ms">10ms</label>
      </li>

    </ul>
    <h3>Brand</h3>
    <ul class="monitor-brand">
      <li>
        <input type="checkbox" value="branda" id="filter-branda" />
        <label for="filter-branda">Brand A</label>
      </li>
      <li>
        <input type="checkbox" value="brandb" id="filter-brandb" />
        <label for="filter-brandb">Brand B</label>
      </li>
      <li>
        <input type="checkbox" value="brandc" id="filter-brandc" />
        <label for="filter-brandc">Brand C</label>
      </li>
      <li>
        <input type="checkbox" class="brandd" id="filter-brandd" />
        <label for="filter-brandd">Brand D</label>
      </li>
      <li>
        <input type="checkbox" value="brande" id="filter-brande" />
        <label for="filter-brande">Brand E</label>
      </li>
      <li>
        <input type="checkbox" value="brandf" id="filter-brandf" />
        <label for="filter-brandf">Brand F</label>
      </li>

    </ul>
  </div>
  <div class="results">
    <div class="result gaming monitor 32inch 4K 5ms branda">32inch 4K Monitor - Brand A <span class="btn">Order</span></div>
    <div class="result gaming monitor 32inch 4K 5ms branda">32inch 4K Monitor - Brand A <span class="btn">Order</span></div>
    <div class="result gaming monitor 32inch 5K 1ms brandb">32inch 5K Monitor - Brand B<span class="btn">Order</span></div>
    <div class="result gaming monitor 40inch 5K 1ms brandc">40inch 5K Monitor - Brand C<span class="btn">Order</span></div>
    <div class="result office monitor 24inch 1080p 10ms brandd">24inch 1080p Monitor - Brand D<span class="btn">Order</span></div>
    <div class="result home monitor 24inch 4K 5ms brandd">24inch 4K Monitor - Brand D <span class="btn">Order</span></div>


    <div class="result gaming monitor 32inch 5K 1ms brande">32inch 5K Monitor - Brand E<span class="btn">Order</span></div>
    <div class="result gaming monitor 40inch 5K 1ms brande">40inch 5K Monitor - Brand E<span class="btn">Order</span></div>
    <div class="result office monitor 24inch 1080p 10ms brande">24inch 1080p Monitor - Brand E<span class="btn">Order</span></div>
    <div class="result home monitor 24inch 4K 5ms brandf">24inch 4K Monitor - Brand F <span class="btn">Order</span></div>
    <div class="result home monitor 24inch 4K 5ms brandf">24inch 4K Monitor - Brand F <span class="btn">Order</span></div>
  </div>
</body>

</html>

最佳答案

querySelector 与 selectors that start with a number 有问题.如果在下面的代码中转义第一个数字，则可以使用选择器 r.replace(/^(\d)/, '\\3' + '$1 ')。
由于您在选择器之间循环，您可以在显示结果之前隐藏所有元素。在下面的代码中，document.querySelectorAll('div.result').forEach(div => div.style.display = "none"); 就在循环之前。

我还添加了一个条件，以防未选择任何内容。在您的代码中，它导致了错误。

$(document).ready(function() {
  $(':checkbox[type="checkbox"]').on('change', function() {
    var assignedTo = $(':checkbox[type="checkbox"]:checked').map(function() {
    let r = $(this).attr('value');
    r = r.replace(/^(\d)/, '\\3' + '$1 ');
        return r;
      })
      .get().join(".");
    console.log(assignedTo);
    document.querySelectorAll('div.result').forEach(div => div.style.display = "none");
    if (assignedTo !== ""){
    document.querySelectorAll("div.result." + assignedTo).forEach(div => div.style.display = "block");
    }
  });
});

.result {
  width: 100%;
  border: 1px solid black;
  padding: 20px;
  line-height: 20px;
  text-align: left;
  margin: 10px;
  float: left;
  font-size: 11px;
  color: #000;
  font-family: sans-serif;
  display: none;
}

div.results {
  width: 70%;
  display: inline;
  float: left;
  position: relative;
  padding-right: 10%;
}

div#filters {
  width: 20%;
  display: inline;
  float: left;
  position: relative;
}

.btn {
  background-color: #0077ce;
  color: #fff;
  font-weight: bold;
  border-radius: 10px;
  padding: 10px;
  display: inline-block;
  position: relative;
  float: right;
}

.btn:hover {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <title>Test</title>
</head>

<body>
  <h1>Find your monitor</h1>
  <div id="filters">
    <h3>Recommended For</h3>
    <ul class="recommended">
      <li>
        <input type="checkbox" value="home" id="filter-home" />
        <label for="filter-home">Home</label>
      </li>
      <li>
        <input type="checkbox" value="office" id="filter-office" />
        <label for="filter-office">Office</label>
      </li>
      <li>
        <input type="checkbox" value="gaming" id="filter-gaming" />
        <label for="filter-gaming">Gaming</label>
      </li>
    </ul>
    <h3>Size</h3>
    <ul class="-monitor-size">
      <li>
        <input type="checkbox" value="24inch" id="filter-24inch" />
        <label for="filter-24inch">24inch</label>
      </li>
      <li>
        <input type="checkbox" value="32inch" id="filter-32inch" />
        <label for="filter-32inch">32inch</label>
      </li>
      <li>
        <input type="checkbox" value="40inch" id="filter-40inch" />
        <label for="filter-40inch">40inch</label>
      </li>
    </ul>
    <h3>Resolution</h3>
    <ul class="monitor-resolution">
      <li>
        <input type="checkbox" value="1080p" id="filter-1080p" />
        <label for="filter-1080p">1080p</label>
      </li>
      <li>
        <input type="checkbox" value="4K" id="filter-4K" />
        <label for="filter-4K">4K</label>
      </li>
      <li>
        <input type="checkbox" value="5K" id="filter-5K" />
        <label for="filter-5K">5K</label>
      </li>
    </ul>
    <h3>Response Time</h3>
    <ul class="monitor-responsetime">
      <li>
        <input type="checkbox" value="1ms" id="filter-1ms" />
        <label for="filter-1ms">1ms</label>
      </li>
      <li>
        <input type="checkbox" value="5ms" id="filter-5ms" />
        <label for="filter-5ms">5ms</label>
      </li>
      <li>
        <input type="checkbox" value="10ms" id="filter-10ms" />
        <label for="filter-10ms">10ms</label>
      </li>

    </ul>
    <h3>Brand</h3>
    <ul class="monitor-brand">
      <li>
        <input type="checkbox" value="branda" id="filter-branda" />
        <label for="filter-branda">Brand A</label>
      </li>
      <li>
        <input type="checkbox" value="brandb" id="filter-brandb" />
        <label for="filter-brandb">Brand B</label>
      </li>
      <li>
        <input type="checkbox" value="brandc" id="filter-brandc" />
        <label for="filter-brandc">Brand C</label>
      </li>
      <li>
        <input type="checkbox" class="brandd" id="filter-brandd" />
        <label for="filter-brandd">Brand D</label>
      </li>
      <li>
        <input type="checkbox" value="brande" id="filter-brande" />
        <label for="filter-brande">Brand E</label>
      </li>
      <li>
        <input type="checkbox" value="brandf" id="filter-brandf" />
        <label for="filter-brandf">Brand F</label>
      </li>

    </ul>
  </div>
  <div class="results">
    <div class="result gaming monitor 32inch 4K 5ms branda">32inch 4K Monitor - Brand A <span class="btn">Order</span></div>
    <div class="result gaming monitor 32inch 4K 5ms branda">32inch 4K Monitor - Brand A <span class="btn">Order</span></div>
    <div class="result gaming monitor 32inch 5K 1ms brandb">32inch 5K Monitor - Brand B<span class="btn">Order</span></div>
    <div class="result gaming monitor 40inch 5K 1ms brandc">40inch 5K Monitor - Brand C<span class="btn">Order</span></div>
    <div class="result office monitor 24inch 1080p 10ms brandd">24inch 1080p Monitor - Brand D<span class="btn">Order</span></div>
    <div class="result home monitor 24inch 4K 5ms brandd">24inch 4K Monitor - Brand D <span class="btn">Order</span></div>


    <div class="result gaming monitor 32inch 5K 1ms brande">32inch 5K Monitor - Brand E<span class="btn">Order</span></div>
    <div class="result gaming monitor 40inch 5K 1ms brande">40inch 5K Monitor - Brand E<span class="btn">Order</span></div>
    <div class="result office monitor 24inch 1080p 10ms brande">24inch 1080p Monitor - Brand E<span class="btn">Order</span></div>
    <div class="result home monitor 24inch 4K 5ms brandf">24inch 4K Monitor - Brand F <span class="btn">Order</span></div>
    <div class="result home monitor 24inch 4K 5ms brandf">24inch 4K Monitor - Brand F <span class="btn">Order</span></div>
  </div>
</body>

</html>

关于javascript - 产品过滤器 - 根据选中/取消选中的多个复选框显示结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65803691/

文章推荐： css - 文本对齐:右；打破背景剪辑:文本；

文章推荐： javascript - 在 Javascript 中删除和更新没有突变的数组

文章推荐： javascript - 显示悬停效果但忽略点击事件？

文章推荐： python - 为给定的点云拆分上边缘线和下边缘线？

linux - (取消/取消)在 bash 中压缩一个字符串？
是否可以使用标准输入/标准输出在 bash 中压缩/解压缩字符串？我试过了，但显然不支持它？ hey=$(echo "hello world" | gzip -cf) echo $hey # ret
javascript - 取消/取消 IE7 输入搜索上的 JavaScript 操作
我的任务是让一个企业网站适用于 IE7，它必须“足够好”，因此我禁用了任何导致问题的花哨/非必要功能。其中之一是正在使用的搜索栏，需要进行哪些搜索，我猜测幕后某个地方有某种 JavaScript 用
取消 getchar()
我有一个执行大量处理的小程序。您可以通过按回车键打印进度。我实现它的方法是在主线程中完成处理，同时我有一个 pthread 不断循环 getchar() 以等待输入键。问题是当我完成处理时。发生这
android - CoroutineScope 取消
我完全理解 suspendCoroutine 与 suspendCancellableCoroutine 在我的示例中的工作方式。但我想知道为什么 println("I finished") (第 1
qt - QFileDialog 取消
我是 QT 的新手。目前在我的项目中我实现了 QFileDialog . 在我的用例中:每当用户选择一个文本文件时，它都会执行 functionA .但是，我发现如果在文件对话框中单击取消，funct
excel - 取消 GetSaveAsFilename
我有代码，仅在用户选择“另存为”时运行。为此并获取我正在使用的文件的新名称 Application.GetSaveAsFilename功能。我遇到的问题是类型不匹配，同时检查用户是否在他没有这样做时
iphone - 取消 UILocalNotification
我的 UILocalNotification 有问题。我正在用我的方法安排通知。 - (void) sendNewNoteLocalReminder:(NSDate *)date alrt:(NS
javascript - 取消 XMLHttpRequest？
祝你有美好的一天我有一个网站，其中有很多“工具提示”。这些工具提示是在将鼠标悬停在文本的特定部分上时创建的。工具提示是一个 div block ，它显示在网站上所有其他内容的顶部，并且当光标从文本移
Java TimerTask 取消
我遇到以下问题。每隔 2 秒，程序就会进入 if 语句。在这个 if 语句中，我想要一个计时器，它会在 15 秒后给我一条消息。计时器应延迟 1 秒运行。但是当我用计时器“等待”时，if 语句将再执行
java - FutureTask 取消()
基本上我有以下代码片段， (let [task (FutureTask. fn) thr (Thread. task)] (.start thr) ;;wait for signa
iphone - 取消 ASIHTTPRequest
取消正在进行的 ASIHttpRequest 请求的正确位置在哪里？这就是我取消的方式，但是当我时它继续崩溃在不让请求完成的情况下从一个 View Controller 转移到另一个 View Co
c# - BackgroundWorker 取消
我在我的 winforms 应用程序中使用 BackgroundWorker 来执行另一个类中发生的长时间运行的任务(执行数据库操作)。由于所有工作都是在另一个类中完成的，因此取消并不那么简单。我在另
android - 取消/关闭图标上的通知
我正在使用 OneSignal 向我的用户显示通知。通知工作正常，但我注意到，如果我在通知栏中“滑动”取消通知，则通知将永远保留，这是一张显示应用程序图标上的通知的图像，我想在应用程序已打开: 我看到
android - 取消 AsyncTask
正在运行的 AsyncTask 的 .cancel(boolean) 方法如何工作？这是文档: Attempts to cancel execution of this task. This atte
ios - (取消)激活约束如何在内部工作？
我注意到，当我激活约束时，我会立即在该行代码处收到一条警告，指出不能同时满足约束。我假设布局是在“UI 更新周期”之类的稍后时间点计算的，而不是每次约束都被(取消)激活。因此，在(取消)激活约束的代
ios - 取消 NSThread
这是我创建线程的方式: readFromWebThread = [[NSThread alloc] initWithTarget:self selector:@selector(loadThread:
ios - 取消 UILocalNotification
我目前正在尝试取消与我的数据模型中的对象关联的特定 UILocalNotifications。为此，每个数据对象都有一个唯一标识符，即 NSUUID。创建 UILocalNotification:
javascript确认(取消)返回false时仍然提交表单
当我提交并单击“确定”时，它会继续，但当我按“取消”时，它仍然会提交。我尝试使用此代码，但提交和取消按钮仍然执行相同的操作。 model.saveForm = function() { var
javascript - 取消 setTimeout()
我有一个警报弹出窗口，当发生特定操作时会出现该弹出窗口。 5 秒后，使用 setTimeout() 隐藏警报弹出窗口。我遇到的问题是，如果我多次触发弹出窗口，有时后续的弹出窗口会出现但立即消失。我相
javascript - 取消/停止超时功能
我有一些 javascipt (jQuery)，其中单击按钮时会淡入 #myDiv，然后使用超时函数在 5 秒后再次淡出。它工作正常，但如果用户在超时内的 fadeOut 函数运行之前再次单击该按钮，

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 产品过滤器 - 根据选中/取消选中的多个复选框显示结果