Question

我需要编写用于过滤元素的脚本。我有单选按钮和网格元素的表单。我的想法是在我开始检查时显示特定的元素：为了检查我检查PAPER，当我添加ROUND时，我看到所有纸张项目，我看到“圆形纸”，当添加SIZE XL时，它只显示具有所有这些类别的项目“PAPER，ROUND，XL，当没有只有抱歉才能看到结果。

我应该如何开始？任何线索？

我想为此使用jQuery。

以下是项目链接：a way for the user to manually switch other apps once they're in the built-in Maps app

canOpenURL:

Answer 1

将此代码添加到代码笔的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();
          }
        })
      });
    });

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

1 个答案: