0

フィルターが必要なリストがあります。この質問に示すようにチェックボックスが機能しています。

私のページでは、以下のコードとこのフィドルに示すように、ページの上部にタブが既に機能していました。

ただし、それらは互いに競合するため、現在、列 1 のチェックボックスがクリックされているときに xtr1 をクリックすると、すべての列 1 が削除され、すべての xtr1 が表示されます。たとえば、col 1がチェックされているxtra1のすべてを表示したい。以下に示すように、変数 addchosen を追加してこれを処理しようとしましたが、機能しません。どうすればこれを実現できますか?

<div id="nav">
    <a rel="all"  id="all">All</a>
    <a rel="xtr1" id="xtr1">xtr1</a>
    <a rel="xtr2" id="xtr2">xtr2</a>
    <a rel="xtr3" id="xtr3">xtr3</a>
</div>

<form id="refine-cat">
    <span><input type="checkbox" value="1" name="filtercol">cat 1</span>
    <span><input type="checkbox" value="2" name="filtercol">cat 2</span>
    <span><input type="checkbox" value="3" name="filtercol">cat 3</span>
</form>
<form id="refine-col">
    <span><input type="checkbox" value="1" name="filtercat">col 1</span>
    <span><input type="checkbox" value="2" name="filtercat">col 2</span>
    <span><input type="checkbox" value="3" name="filtercat">col 3</span>
    <span><input type="checkbox" value="4" name="filtercat">col 4</span>
</form>
<ul>
    <li class="xtr3 all item cat-3 col-1">col 1 - cat 3 - xtra 3</li>
    <li class="xtr1 all item cat-3 col-1">col 1 - cat 3 - xtra 1</li>
    <li class="xtr1 all item cat-3 col-1">col 1 - cat 3 - xtra 1</li>
</ul>

(リストには、フィドルにさらに項目があります)

JS

var chosen = "";

jQuery("#nav a").on("click", function (event) {

    jQuery("#nav a").removeClass("current");
    jQuery(this).addClass("current");

    chosen = jQuery(this).attr("rel");

    jQuery(".item").not("." + chosen).hide();
    jQuery("." + chosen).show();

});


var $items = jQuery('.item');
var $cats = jQuery('#refine-cat input[type=checkbox]');
var $cols = jQuery('#refine-col input[type=checkbox]');

$cols.add($cats).on('change', function (e) {
    var cats = $cats.filter(':checked').map(function(){
        return 'cat-' + (this.value || '')
    }).get();
    var cols = $cols.filter(':checked').map(function(){
        return 'col-' + (this.value || '')
    }).get();

    if(cats.length || cols.length){
        var $fitems = $items;
        var addchosen = "";
        if (chosen) {
            addchosen =', .' + chosen;
        }        
        if(cats.length){
            $fitems = $fitems.filter('.' + cats.join(', .') + addchosen );
        }
        if(cols.length){
            $fitems = $fitems.filter('.' + cols.join(', .'));
        }

        $fitems.show();
        $items.not($fitems).hide();
    } else {
        $items.show();
    }
});
4

2 に答える 2

1

コードを少し修正しました。これを行うためのよりクリーンな方法がありますが、私はあなたの考え方を変えたくありませんでした.

したがって、名前付きの関数を作成し、refine()基本的にコードのこの部分を分離し、選択したフィルターも追加しました。

if(cats.length){
    $fitems = $fitems.filter('.' + cats.join(', .') + addchosen );
}
if(cols.length){
    $fitems = $fitems.filter('.' + cols.join(', .'));
}

したがって、この関数は、次のように、navクリックとcols/cats変更の両方で呼び出されます。

var cats=[], cols=[], $fitems;
var $items = jQuery('.item');
var chosen = "";

function refine() {
    $items.show();
    $fitems = $items;

    if(chosen.length && chosen != 'all') {
        $fitems = $items.filter('.' + chosen);
    }
    if(cats.length){
        $fitems = $fitems.filter('.' + cats.join(', .'));
    }
    if(cols.length){
        $fitems = $fitems.filter('.' + cols.join(', .'));
    }

    $fitems.show();
    $items.not($fitems).hide();
}

jQuery("#nav a").on("click", function (event) {

    jQuery("#nav a").removeClass("current");
    jQuery(this).addClass("current");

    chosen = jQuery(this).attr("rel");

    refine();
});

var $cats = jQuery('#refine-cat input[type=checkbox]');
var $cols = jQuery('#refine-col input[type=checkbox]');

$cols.add($cats).on('change', function (e) {
    cats = $cats.filter(':checked').map(function(){
        return 'cat-' + (this.value || '')
    }).get();
    cols = $cols.filter(':checked').map(function(){
        return 'col-' + (this.value || '')
    }).get();

    refine();
});

これがあなたのフィドルです

于 2013-09-13T02:33:50.047 に答える
1

私はおそらくそれをそれほど複雑にしないでしょう。これが1つの方法です。

jQuery("#nav a").on("click", function (event) {
    jQuery("#nav a").removeClass("current");
    jQuery(this).addClass("current").attr("rel");
    if(this.id == 'all') $cats.add($cols).prop('checked', false);
    updateResult();
});


var $items = jQuery('.item');
var $cats = jQuery('#refine-cat input[type=checkbox]');
var $cols = jQuery('#refine-col input[type=checkbox]');

$cols.add($cats).on('change', function () {
   //Do something....
    updateResult();

});

function updateResult() {

    $('ul > li').hide();

    var consArray = [];
    consArray = consArray.concat($('#nav > a.current').map(function () {
        return this.rel;
    }).get());

    consArray = consArray.concat($cats.filter(':checked').map(function () {
        return 'cat-' + this.value;
    }).get());

    consArray = consArray.concat($cols.filter(':checked').map(function () {
        return 'col-' + this.value;
    }).get());

    if(consArray.length)
        $('.' + consArray.join('.')).show();
 }

フィドル

およびより単純なバージョン:

function updateResult() {
    $('ul > li').hide();
    var consArray =  $('#nav > a.current').add(
                              $cats.filter(':checked')).add(
                              $cols.filter(':checked'))
        .map(function(){
              if(this.nodeName === 'A') return this.rel;
              return this.name.replace(/filter/,'') + '-' + this.value;

           }).get();

    if(consArray.length)
        $('.' + consArray.join('.')).show();
}

フィドル

于 2013-09-13T01:59:40.527 に答える