用单选按钮过滤列表

Question

我目前正在尝试根据它们的厚度“3mm”和“5mm”对2个项目列表进行排序。

我想为你点击3mm的单选按钮来自动筛选3mm类的物品的清单，而5mm的物品也是如此。然后，如果你点击“无偏好”，我希望它删除任何基于厚度的过滤器。

我一直在搞乱它一段时间，试图拼凑代码，但无济于事，任何帮助将非常感激！谢谢！

的jsfiddle也：http://jsfiddle.net/gdkmrqnr/

HTML：

<div id="container"> 
    <div class="page"> 
    <div> 
     <h1>piece-y search</h1> 
    </div> 

    <div id="main"> 


     <div class="c1"> 
     <h2>piece search</h2> 
     <div id="piece-search"> 

      <ul class="sort-by"> 

      <li> 
      <input class="search" placeholder="Search pieces" /> 
      </li> 
      <li class="sort btn" data-sort="type">Sort by type</li> 
      <li class="sort btn" data-sort="thickness">Sort by thickness</li> 
      <li class="sort btn" data-sort="height">Sort by height</li> 
      <li class="sort btn" data-sort="category">Sort by style</li> 
      </ul> 

      <ul class="filter"> 
      <li> 
       <select name="material" id="filter-material"> 
       <option selected="selected" value="">Select a Material</option> 
       <option value="plastic">Plastic</option> 
       <option value="glass">Glass</option> 
       </select> 
      </li> 
      <li> 
      <input type="radio" name="thickness" value="none" checked>No Preference 
      </li> 
      <li> 
      <input type="radio" name="thickness" value="3mm">3mm 
      </li> 
      <li> 
      <input type="radio" name="thickness" value="5mm">5mm 
      </li> 
      <li class="btn" id="filter-none">Show all</li> 
      <li class="btn" id="filter-scientific" value="category">Only show scientific glass</li> 
      <li class="btn" id="filter-artsy" value="category">Only show artsy glass</li> 
      </ul> 

      <ul class="list"> 
      <li class="item"> 
        <p class="sorting-info hide-this"> 
        <p class="material">plastic</p> 
        <p class="type">pipe</p> 
        <p class="thickness">3mm</p> 
        <p class="height">15inch+</p> 
        <p class="category">artsy</p> 
        </p> 
       </li> 

       <li class="item"> 
        <p class="sorting-info hide-this"> 
        <p class="material">glass</p> 
        <p class="type">bowl</p> 
        <p class="thickness">3mm</p> 
        <p class="height">14inch-</p> 
        <p class="category">scientific</p> 
        </p> 
       </li> 
    </ul> 
    </div> 
</div> 
</div> 

</div> <!-- end of #container --> 

JS

// radio button to select thickness 
$("input[type='radio']").change(function() { 
    var number = $("[name='thickness']:checked").val(); 
    var letter = $("[name='thickness']:checked").val(); 

    if (!thickness || !thickness) return; 
    $("li").hide(); 
    $("li").filter(function (index) { 
     return $(this).hasClass(thickness) && $(this).hasClass(letter); 
    }).show(); 
}); 

Answer 1

您可以通过thickness这样的文字过滤列表项：

$("input[type='radio']").change(function() { 
    var number = $("[name='thickness']:checked").val(); 
    //var letter = $("[name='thickness']:checked").val(); 

    //if (!thickness || !thickness) return; 
    var $items = $(".list .item"); 
    if (number === "none") { 
     $items.show(); 
    } else { 
     $items.hide(); 
     $items.filter(function (index) { 
      return $(this).find('.thickness').text() === number; 
     }).show(); 
    } 
}); 

我试图保持尽可能多的代码结构。请参阅您的code重构。

Answer 2

好了，回顾我的代码后，我似乎已经跨过了这个选项，在游戏上面的html ：

把这个作为JS将对列表进行排序select，它j乌斯特不会显示检查框，如果有人知道如何解决这个问题，我会很感激！

JS

// radio button to select thickness 
$('#filter-3mm').click(function() { 
    featureList.filter(function(item) { 
    if (item.values().thickness == "3mm") { 
     return true; 
    } else { 
     return false; 
    } 
    }); 
    return false; 
});