用單選按鈕過濾列表

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