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

Question

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

我应该如何开始呢？有什么线索吗？

我想为此使用 jQuery。

这里是项目链接:http://codepen.io/ponciusz/pen/NGpXPB

<div class="container">
      
      <form> 
        <span class="sub-head">material:</span>
        <input id="mat-paper" type="radio" name="material" value="paper">
        <label for="mat-paper">paper</label>  
        <input id="mat-plastic" type="radio" name="material" value="plastic">
        <label for="mat-plastic">plastic</label><br/>
    
        <span class="sub-head">shape:</span>
        <input id="shape-round" type="radio" name="shape" value="round">
        <label for="shape-round">round</label>
        <input id="shape-squere" type="radio" name="shape" value="squere">
        <label for="shape-squere">squere</label>  <br/>
    
        <span class="sub-head">size:</span>
        <input type="radio" name="size" value="S">
        <label for="size-s">S</label>
        <input type="radio" name="size" value="L">
        <label for="size-l">L</label>
        <input type="radio" name="size" value="M">
        <label for="size-m">M</label>
        <input type="radio" name="size" value="XL">  
        <label for="size-xl">XL</label><br><br>
        <input type="reset" value="Reset!"><br><br>
      </form>
      
    <p>TEST QUERIES:</p>  
    <p>"paper, round, xl" should show only: PRODUCT 6</p> 
    <p>"plastic, round, xl" should show: PRODUCT 2,3,5 </p> 
      
      
    	<div data-categories='["paper", "plastic", "round", "squere", "s"]' class="item">PRODUCT 1</div>
    	<div data-categories='["plastic", "round", "squere", "s", "m","l","xl"]' class="item">PRODUCT 2</div>
    	<div data-categories='["plastic", "round", "squere", "l","xl"]' class="item">PRODUCT 3</div>
    	<div data-categories='["paper", "round", "s"]' class="item">PRODUCT 4</div>
    	<div data-categories='["plastic", "round", "xl"]' class="item">PRODUCT 5</div>
    	<div data-categories='["paper", "round", "xl"]' class="item">PRODUCT 6</div>
    
    <div class="item sorry">SORRY</div>	
    </div>

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();
          }
        })
      });
    });