Javascript 产品过滤器-基于选中/取消选中的多个复选框显示结果

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

我已经为每个结果创建了div，规格是类

每个复选框都有一个value属性。选中此选项后，此属性将存储在地图对象中。这样，当我取消选中复选框时，它将从映射对象中删除，反之亦然

贴图对象的结果将在和之间用“.”连接在一起 存储在分配给的变量中，这将被记录，以便您可以查看已选择的变量

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

我尝试过使用document.queryselectoral，然后通过显示block循环使用，但有两个问题：

我得到一个“未捕获的语法错误：未能对“文档”执行“querySelectorAll”：“…”不是有效的选择器”

如果我成功地循环并显示每个结果，如果我取消选中一个框，如何使该结果消失

$（文档）.ready（函数（）{
$（'：checkbox[type=“checkbox”]'）。在（'change'，function（）上{
var assignedTo=$（'：checkbox[type=“checkbox”]：checked'）.map（函数（）{
返回$（this.attr（'value'）；
})
.get（）.join（“.”）；
控制台日志（分配给）；
document.queryselectoral（“div.result.”+assignedTo.forEach（div=>div.style.display=“block”）
});
});
.result{
宽度：100%；
边框：1px纯黑；
填充：20px；
线高：20px；
文本对齐：左对齐；
利润率：10px；
浮动：左；
字体大小：11px；
颜色：#000；
字体系列：无衬线；
显示：无；
}
分区结果{
宽度：70%；
显示：内联；
浮动：左；
位置：相对位置；
右：10%；
}
div#过滤器{
宽度：20%；
显示：内联；
浮动：左；
位置：相对位置；
}
.btn{
背景色：#0077ce；
颜色：#fff；
字体大小：粗体；
边界半径：10px；
填充：10px；
显示：内联块；
位置：相对位置；
浮动：对；
}
.btn:悬停{
光标：指针；
}

试验
找到你的显示器
推荐给


家


办公室


游戏


大小


24英寸


32英寸


40英寸


决议


1080p


4K


5K


响应时间


千分之一秒


5ms


10毫秒


烙印


品牌A


B品牌


品牌C


品牌D


品牌E


品牌F


32英寸4K显示器-品牌A订单
32英寸4K显示器-品牌A订单
32英寸5K显示器-品牌边框
40英寸5K显示器-品牌录像机
24英寸1080p显示器-DOrder品牌
24英寸4K显示器-品牌D订单
32英寸5K显示器-品牌EOrder
40英寸5K显示器-品牌EOrder
24英寸1080p显示器-品牌EOrder
24英寸4K显示器-品牌F订单
24英寸4K显示器-品牌F订单

querySelector
有问题。如果在下面的代码
r.replace（/^（\d）/，'\\3'+'$1'）中转义第一个数字，则可以使用选择器。
由于在选择器中循环，因此可以在显示结果之前隐藏所有元素。在下面的代码中，
document.querySelectorAll（'div.result'）.forEach（div=>div.style.display=“none”）就在循环之前

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


$（文档）.ready（函数（）{
$（'：checkbox[type=“checkbox”]'）。在（'change'，function（）上{
var assignedTo=$（'：checkbox[type=“checkbox”]：checked'）.map（函数（）{
设r=$（this.attr（'value'）；
r=r.replace（/^（\d）/，“\\3”+“$1”）；
返回r；
})
.get（）.join（“.”）；
控制台日志（分配给）；
document.querySelectorAll（'div.result'）.forEach（div=>div.style.display=“无”）；
如果（分配给！==“”）{
document.queryselectoral（“div.result.”+assignedTo）.forEach（div=>div.style.display=“block”）；
}
});
});
.result{
宽度：100%；
边框：1px纯黑；
填充：20px；
线高：20px；
文本对齐：左对齐；
利润率：10px；
浮动：左；
字体大小：11px；
颜色：#000；
字体系列：无衬线；
显示：无；
}
分区结果{
宽度：70%；
显示：内联；
浮动：左；
位置：相对位置；
右：10%；
}
div#过滤器{
宽度：20%；
显示：内联；
浮动：左；
位置：相对位置；
}
.btn{
背景色：#0077ce；
颜色：#fff；
字体大小：粗体；
边界半径：10px；
填充：10px；
显示：内联块；
位置：相对位置；
浮动：对；
}
.btn:悬停{
光标：指针；
}

试验
找到你的显示器
推荐给


家


办公室


游戏


大小


24英寸


32英寸


40英寸


分解