3

私はjQueryを使用してページ上の製品アイテムをフィルタリングしています（DIVの非表示と表示）。PHP$ _GETは少し古い方法であるため、代わりにフィルターを使用しています。これはjQueryを介して実行しようとしています。filter（）とdata属性を使用しています。

既存の項目を除いて、チェックボックスの現在の選択をオフにするにはどうすればよいですか？選択に基づいてアイテムを非表示にし、そうでない場合は再表示するにはどうすればよいですか？

HTML

<input type="checkbox" id="drama" onClick="filterCategory(this.value)" value="drama" /> Drama<br />
<input type="checkbox" id="romance" onClick="filterCategory(this.value)" value="" /> Romance<br />
<input type="checkbox" id="horror" onClick="filterCategory(this.value)" value="horror" /> Horror<br />

<!--------------------->
<div class="products">
    <div class="productItem" data-price="250" data-category="horror">
        Scary Book
        <div class="productItemPrice"><span>&pound;250</span></div>
    </div>
    <div class="productItem" data-price="150" data-category="drama">
        Drama Poems
        <div class="productItemPrice"><span>&pound;150</span></div>
    </div>
    <div class="productItem" data-price="250" data-category="romance">
        Love Story
        <div class="productItemPrice"><span>&pound;250</span></div>
    </div>
    <div class="productItem" data-price="241" data-category="horror">
        Creep Book
        <div class="productItemPrice"><span>&pound;241</span></div>
    </div>
</div>
<!--------------------->

jQUERY

function filterCategory(id) {
    var pid=$(".productItem"); // Which product is it
    var checkid=$('#'+id); // The name of the checkbox form
    var cid=$(pid).data("category"); // The value of the checkbox form
    if ($(checkid).is(':checked')){
        $(pid).hide().filter(function () {var catId=$(this).data("category");return catId;}).show();
    } else {
        $(pid).show().filter(function () {var catId=$(this).data("category");return catId;}).show();
    }
}

CSS

.productItem{float:left;padding:5px;margin:5px;border:1px solid #eaeaea}
body{font-family:verdana}

JSFiddle

http://jsfiddle.net/RyZy8/

4

1 に答える 1

7

代わりに、このようなものを使用してみてください。

まずonclick、チェックボックスの属性を削除します-jQueryを使用してclickイベントをバインドします：

// bind to click
$('input[type="checkbox"]').click(function() {
    // any checked
    if ($('input[type="checkbox"]:checked').length > 0) {
        // hide all
        $('.products >div').hide();
        // loop checked and display relavent div
        $('input[type="checkbox"]:checked').each(function() {
            $('.products >div[data-category=' + this.id + ']').show();
        });
    } else {
        // none checked - show all
        $('.products >div').show();
    }
});​

ここでの実例

于 2012-09-24T10:39:26.497 に答える