用單選按鈕和jquery多個類進行過濾

Question

我想創建一個使用單選按鈕和jQuery的過濾器。

我有這樣的項目清單如下：

<ul class="all-options"> 
    <li class="1 a"> 
     <img src="path/to/image"/> 
     <h3>Price</h3> 
     <h2>$1000</h2> 
    </li> 
    <li class="1 b"> 
     <img src="path/to/image"/> 
     <h3>Price</h3> 
     <h2>$1500</h2> 
    </li> 
    <li class="2 a"> 
     <img src="path/to/image"/> 
     <h3>Price</h3> 
     <h2>$1200</h2> 
    </li> 
    <li class="2 b"> 
     <img src="path/to/image"/> 
     <h3>Price</h3> 
     <h2>$1300</h2> 
    </li> 
</ul> 

我想以一次只查看一個項目的基礎上，從以下單選按鈕用戶的選擇：

<label>Numbers</label><br/> 
    <input type="radio" name="number" value="1">1<br/> 
    <input type="radio" name="number" value="2">2<br/> 
<label>Letters</label><br/> 
    <input type="radio" name="letter" value="a">a<br/> 
    <input type="radio" name="letter" value="b">b 

所以，爲了顯示一個項目，我知道兩個類必須與單選按鈕的選擇相匹配。雖然我對jquery很新，所以我希望有人能指出我正確的方向。

Answer 1

這可能不是最有效的方式，但它是在我腦海的第一件事，和它的工作原理：

假設你有id="apply"過濾器按鈕...

$("#apply").click(function (e) { 
    e.preventDefault(); 
    var number = $("[name='number']:checked").val(); 
    var letter = $("[name='letter']:checked").val(); 
    $("li").hide(); 
    $("li[class='" + number + " " + letter + "']").show(); 
}); 

Here is a working example

---

更好的版本

，就好像你li元素有任何其他類以上會失敗，下面是使用jQuery的filter方法的另一種方法：

$("#apply").click(function (e) { 
    e.preventDefault(); 
    var number = $("[name='number']:checked").val(); 
    var letter = $("[name='letter']:checked").val(); 
    $("li").hide(); 
    $("li").filter(function (index) { 
     return $(this).hasClass(number) && $(this).hasClass(letter); 
    }).show(); 
}); 

Here is a working example

---

你可以把這個邏輯對任何事件，如change爲單選按鈕...

$("input[type='radio']").change(function() { 
    var number = $("[name='number']:checked").val(); 
    var letter = $("[name='letter']:checked").val(); 
    //check if both radios have selected values before proceeding 
    if (!number || !letter) return; 
    $("li").hide(); 
    $("li").filter(function (index) { 
     return $(this).hasClass(number) && $(this).hasClass(letter); 
    }).show(); 
}); 

Here is a working example

當然，如果您的任何number s是0那麼他們將不會通過價值檢查，因爲它代表。

Answer 2

我只是綁定musefan代碼事件偵聽器（更確切地說，是「變」事件），以具有動態DOM互動：

$(function() { 
    $('input[type="radio"]').on('change', function() { 
    var number = $("[name='number']:checked").val(); 
    var letter = $("[name='letter']:checked").val(); 
    $("li").hide(); 
    $("li").filter(function (index) { 
    return $(this).hasClass(number) && $(this).hasClass(letter); 
    }).show(); 
    }); 
}); 

這裏一個jsFiddle。