1

あるカテゴリのすべての製品を 1 ページにリストするストア用の単純な jQuery 製品フィルタをまとめようとしています。これは、ストアの設定方法により、AJAX では実現できません。

簡単に言えば、カテゴリのすべての製品が 1 つのページに表示されます。彼らは、さまざまなブランドの製品名とチーム名を持っています。マークアップは次のようになります (最後のフォームは、私がフィルターを実行しようとしている方法です)。

<div id="CategoryContent">
<ul>

<li class="product">Brand1 PRODUCT1 TeamA</li>
<li class="product">Brand1 PRODUCT2 TeamB</li>
<li class="product">Brand2 PRODUCT3 TeamB</li>
<li class="product">Brand2 PRODUCT4 TeamC</li>
<li class="product">Brand3 PRODUCT5 TeamA</li>
<li class="product">Brand3 PRODUCT6 TeamD</li>
<li class="product">Brand4 PRODUCT7 TeamD</li>
<li class="product">Brand1 PRODUCT8 TeamA</li>
<li class="product">Brand1 PRODUCT9 TeamA</li>
<li class="product">Brand1 PRODUCT10 TeamB</li>
<li class="product">Brand4 PRODUCT11 TeamD</li>
<li class="product">Brand2 PRODUCT12 TeamA</li>
</ul>

<div style="clear:both;"></div>
<div class="filter">
<form id= "brandfilter" action="">
    <h2>Brands:</h2>
<input type="checkbox" name="brand" value="Brand1"/>Brand1 </br>
<input type="checkbox" name="brand" value="Brand2"/>Brand2 </br>
<input type="checkbox" name="brand" value="Brand3"/>Brand3 </br>    
<input type="checkbox" name="brand" value="Brand1"/>Brand4 </br>
</form>
<form id="teamfilter" action="">
<input type="checkbox" name="team" value="TeamA"/>TeamA </br>
<input type="checkbox" name="team" value="TeamB"/>TeamB </br>
<input type="checkbox" name="team" value="TeamC"/>TeamC </br>
<input type="checkbox" name="team" value="TeamD"/>TeamD </br>
</form>

このフィルターが思いどおりに機能することがわかりました。コンソールでは、hide を show に、Brand1 を Brand2、TeamA などに置き換えても問題なく動作します。

$("#CategoryContent li").not(
$("#CategoryContent li:contains(Brand1)")
).hide();

次のステップは、同様に機能する二重フィルターを取得することです。

$("#CategoryContent li").not(
$("#CategoryContent li:contains(Brand1):contains(TeamA)")
).hide();

これを機能させることに関する私の問題は2つあります。1 は、Brand1 / Team A を変数に置き換えています (したがって、formids)。

2 つ目は、チェックボックスがクリックされたときにスクリプトを実行しようとしています。いずれかがクリックされた場合、および両方がクリックされた場合に機能するはずです (つまり、上記のスクリプトでは、すべてを表示してから非表示にすることでリセットする必要があります)。

現在、それを開始するためにこのスクリプトを実行していますが、問題が発生しているため、フィルターを 1 つだけに戻しました。

$("input:checkbox[name='brand']").click(function() {
    var brandfilter = $(this).val();
    alert (brandfilter);
    $("#CategoryContent li:contains('  + brandfilter + ')").parent().hide();
});

ポップアップするアラートは私が望むもの（つまりBrand1）ですが、その後の非表示機能は機能せずalert (brandfilter)、コンソールに再び戻ると[object HTMLFormElement]. それで、変数が正しく保存されていないと思いますか？

これは、単純な作業の基本的なスクリプトhttp://jsfiddle.net/7gYJc/です

4

4 に答える 4

1

現在チェックされているボックスに一致するアイテムを表示したい場合は、次のように使用できます。

$('input:checkbox').change(showHideProducts);

function showHideProducts()
{
    var checked = $('input:checked');
    var products = $('.product');

    // If all the boxes are unchecked, show all the products.
    if (checked.length == 0)
    {
        products.show();
    }
    else
    {
        products.hide();
        checked.each
        (
            function()
            {
                $('.product:contains("' + $(this).val() + '")').show();
            }            
        );
    }
}​

編集：何もチェックされていないときにすべてのボックスを表示したいので、if（長さ= 0）チェックを追加して、そこにすべてを表示します（上記を参照）。

于 2012-05-11T01:00:28.633 に答える
0

問題がどこにあるのかわかりませんが、セレクターfilter()の代わりに使用してみることができます。:containsを使用filter()すると、パラメータとして関数を受け取るため、独自のカスタムフィルタリングルールを作成できます。

var myProducts = function (brand, team) {

    brand = brand || '';
    team = team || '';

    return $('.product').filter(function () {
        var re = new RegExp(brand + '.+' + team, 'i');
        return re.test($(this).text());
    });

};

myProducts('Brand1', 'TeamA').hide();
myProducts('Brand2').hide();

例： http： //jsfiddle.net/elclanrs/hYZcW/

于 2012-05-11T00:31:08.763 に答える
0

今週、複数の選択で同じ種類の問題が発生しました。セレクターは正常に機能しましたが、非表示は機能しませんでした。私はそれを使用してそれを解決することができました

.css('visibility', 'hidden'); // instead of .hide() and 
.css('visibility', ''); // instead of .show()

私はそれを理解していませんが、うまくいきました。

于 2012-05-11T01:06:22.367 に答える
0

私は次のアプローチを思いつきました：

すべての製品を表示するため、すべてのチェックボックスをオンにして開始します。ユーザーがチェックボックスのチェックを外すと、そのブランド/チームに一致する製品が非表示になります。

これが私が持っていたコードです：

var $filters = $("input:checkbox[name='brand'],input:checkbox[name=team]").prop('checked', true); // start all checked
var $categoryContent = $('#CategoryContent li'); // cache this selector
$filters.click(function() {
    // if any of the checkboxes for brand or team are checked, you want to show LIs containing their value, and you want to hide all the rest.
    $categoryContent.hide();
    $filters.filter(':checked').each(function(i, el) {
        $categoryContent.filter(':contains(' + el.value + ')').show();
    });
});​

jsFiddle リンク.

于 2012-05-11T00:53:44.557 に答える