Javascript 如何使用单选按钮过滤jQuery中的元素

我需要为过滤元素编写脚本。 我有单选按钮和元素网格的表单。这样做的目的是在我开始检查时显示特定元素，以便： 例如，我检查纸张，当我添加圆形时，我看到所有纸张项目，当我添加尺寸XL时，我看到“圆形纸张”，因此它只显示具有所有这些类别的项目“纸张，圆形，XL，当没有结果时，仅“对不起”将可见

我该怎么开始？有什么线索吗

我想使用jQuery来实现这一点

以下是项目的链接：

材料：
纸张
塑料

形状：
圆形的
斯奎尔

尺寸：
s
L
M
XL





测试查询：

“纸、圆、xl”应仅显示：产品6
“塑料、圆形、xl”应显示：产品2、3、5
产品1
产品2
产品3
产品4
产品5
产品6
很抱歉

将此代码添加到代码笔的JS部分（不要忘记在代码笔中包含jQuery，否则它将无法工作）

  $(function(){
      var items = $("[data-categories]");
      //get all the elements that has data-categories attribute
      items.hide(); //hide all of the elements we found above
      $("input[type=radio]").on("change",function(ev){ //bind onchange event
        var selectedValues = []; //this array will hold all of our current categories
        $("input:checked").each(function(idx, checkedRadio){//get all of the input radio buttons that are checked and add the value of each of them to the selectedValues array we created above
          selectedValues.push($(checkedRadio).val().toLowerCase());
        });
        items.each(function(idx, item){//go over all of the items with data-categories
          $item = $(item); //wrap the element with jQuery
//the bShouldElementShow will only be true if the element has all of the categories that we added to selectedValues as the every function returns true if all of the elements pass the predict and false if even one doesn't pass.
          var bShouldElementShow = selectedValues.every(function(el){
            return $item.data("categories").indexOf(el) != -1;
          });

          //if all of categories appear for this element then show it, else hide it.
          if(bShouldElementShow){
            $item.show();
          }
          else{
            $item.hide();
          }
        })
      });
    });

---

您能为脚本添加注释吗？我真的想理解脚本，我正试图将其更改为隐藏框

。很抱歉，开始时仅当
var bShouldElementShow
为空但不起作用时才显示它。为什么定义
$this=$（this）
？我会尽快，关于$this，我没有在末尾使用它。我添加了注释并删除了$this，这在这里是无用的。