1

次のような車のリストがあります：（もちろん簡略化されています）

<div class="car" data-image="true" data-specs="true">
   1. BMW
</div>
<div class="car" data-image="false" data-specs="true">
   2. Mercedes
</div>
<div class="car" data-image="true" data-specs="false">
   3. Audi
</div>
<div class="car" data-image="false" data-specs="false">
   4. Jaguar
</div>

私が欲しいのは、車をフィルタリングするチェックボックスのリストです。

With image <input name="with_image" type="checkbox" />
With specs <input name="with_specs" type="checkbox" />

両方のチェックボックスがオンになっている場合、最初の車だけを表示し、他の車は非表示にしたいと思います。

問題は、チェックボックスがチェックされているかチェックされていないときに単純hide()にshow()それらを表示すると、他のチェックボックスがチェックされているかどうかがわからないことです。たとえば、両方のチェックボックスをオンにすると、最初の車のみwith_specsが表示されますが、チェックを外すと、画像がなくても 4 番目の車も表示されます。

どうすればこれを克服できますか？

4

4 に答える 4

3

完全に動的で、車やチェックボックスを追加することで拡張できます。

$('input[type="checkbox"]').on('change', function() {
    var checks = $.map($('input[type="checkbox"]:checked'), function(el) {
        return el.name.replace('with_','');
    });

    $('.car').each(function(_,el) {
        var h = 0;
        for (var i=0; i<checks.length; i++) {
            if ( !!$(el).data(checks[i]) ) h++;
        }
        $(el).toggle(h===checks.length);
    });
});

フィドル

于 2013-07-20T20:39:50.527 に答える
2

チェックボックスの変更イベントにハンドラーをバインドして、ボックスが切り替えられるたびに表示される車を変更できるようにします。次に、すべての車を非表示にして、フィルター条件に一致する関連車を表示します。

$("input[type='checkbox']").change(function() {
    $cars = $("div.car").hide();
    if (this.name == "with_image" && $(this).is(":checked")) {
        $cars.filter("[data-image='true']").show();
    }
    if (this.name == "with_specs" && $(this).is(":checked")) {
        $cars.filter("[data-specs='true']").show();
    }
});
于 2013-07-20T20:37:51.353 に答える
2 
$(':checkbox').change(function(){

  // hide all
  $('.car').hide();

  // show with image when image checkbox is checked
  if($('[name=with_image]').is(':checked'))
    $('[data-image=true]').show();

  // show with specs when specs checkbox is checked
  if($('[name=with_specs]').is(':checked'))
    $('[data-specs=true]').show();
})

ちらつきが邪魔になる可能性がありますが、それを改善すると思います。

于 2013-07-20T20:36:28.033 に答える
0

チェックボックスをオンにするたびに同じ関数を実行できます。これにより、すべてのチェックボックスが取得され、フィルターが適用されます。彼らにクラスを与えるだけです。

$(".checkbox:checked").each(function(){
    //probably start with a helper function to show all
    //then hide the ones you want to hide.
});
于 2013-07-20T20:32:53.943 に答える