[英]Filtering a list with radio buttons
我目前正在嘗試根據厚度“ 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();
});
您可以按如下所示的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();
}
});
我試圖保持盡可能多的代碼結構。 查看重構的代碼 。
好的,在檢查完我的代碼之后,我似乎已經使用上面的html跳過了這個選項:
將其作為JS將對選定的列表進行排序,它不會顯示選中的框,如果有人知道如何解決此問題,我將不勝感激!
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;
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.