0

私は問題を解決しようとしてきましたが、javascript/jquery があまり得意ではないので、もう一度お願いします。

白と青を選択すると、白と青の動物がすべて表示されます。これで問題ありません。Horse and Chicken を選択した場合と同じですが、問題は、白い馬または何かを選択するとすぐに、ランダムな情報が得られることです.. 私からの質問は、これをどのように修正できるかということです.

Javascript:

$(function(){
$('div.tags').delegate('input[type=checkbox]', 'change', function()
{
var $lis = $('.results > li'),
    $checked = $('input:checked');

if ($checked.length)
{
    var selector = $checked.map(function ()
    {
        return '.' + $(this).attr('rel');
    }).get().join();

    $lis.hide().filter(selector).show().addClass("show");   
    console.log(selector)
}
else
{
    $lis.show().removeClass("show");
}
});


})

HTML:

 <div class="tags">
 <fieldset class="filter-grp">
 <label><input type="checkbox" rel="white" name="year" /> white </label><br>
 <label><input type="checkbox" rel="blue" name="year" /> blue </label><br>
 <label><input type="checkbox" rel="yellow" name="year" /> yellow </label><br>
</fieldset>

<br>
<fieldset class="filter-grp">
<label><input type="checkbox" rel="horse" name="type"  /> horse</label><br>
<label><input type="checkbox" rel="chicken" name="type"  /> chicken</label><br>
<label><input type="checkbox" rel="cow" name="type"  /> cow</label><br>
</fieldset>
<br>


</div>

<ul class="results">
<li class="white cow">white cow</li>
<li class="white horse">white horse</li>
<li class="white chicken">white chicken</li>
<li class="yellow cow">yellow cow</li>
<li class="blue horse">blue horse</li>
<li class="white chicken">white chicken</li>
 </ul>

ここでテスト:) http://jsfiddle.net/d6Zyr/9/

4

1 に答える 1

0 
$(function () {
$('div.tags').delegate('input[type=checkbox]', 'change', function () {
    var $lis = $('.results > li'),
        $checked = $('input:checked');

    if ($checked.length) {
        var selector = $checked.map(function () {
            return '.' + $(this).attr('rel');
        }).get().join();
        selector = selector.replace(",", "") // removes OR selector
        $lis.hide().filter(selector).show().addClass("show");
        console.log(selector)
    } else {
        $lis.show().removeClass("show");
    }
});


})

デモを見る

于 2013-01-20T15:16:14.653 に答える