0

複数のカテゴリを持つ多くの記事があります。すべてのカテゴリにチェックボックスがあります。チェックボックスをオンにすると、このカテゴリの記事が表示され、そうでない場合は非表示になります。

ここまでは順調ですね。

カテゴリ 1 をチェックすると、カテゴリ 2 ではなく、カテゴリ 1 を持つすべての投稿が表示されます。カテゴリ 2 もある場合は、とにかく表示する必要があります。

<input type="checkbox" value="cat1" id="checkbox1" checked />
<input type="checkbox" value="cat2" id="checkbox2" checked />
<input type="checkbox" value="cat3" id="checkbox3" checked />
<input type="checkbox" value="cat4" id="checkbox4" checked />

投稿の表示と非表示にjQueryを使用しています

if ($('#checkbox1').is(':checked')) {
    $("article.category1").show();
} else {
    $("article.category1").hide();
}

if ($('#checkbox2').is(':checked')) {
    $("article.category2").show();
} else {
    $("article.category2").hide();
}

if ($('#checkbox3').is(':checked')) {
    $("article.category3").show();
} else {
    $("article.category3").hide();
}

if ($('#checkbox4').is(':checked')) {
    $("article.category4").show();
} else {
    $("article.category4").hide();
}

このhttp://jsfiddle.net/oliverspies/t8qHT/1/のjsフィドルを作成しました

すべてをオフにして最初のチェックボックスをオンにすると、エントリは表示されませんが、カテゴリが cat1 のすべてのエントリが表示されます。何十ものIFステートメントを書かずにこれを行うにはどうすればよいですか?

4

5 に答える 5

4

固定コード

入力の値に基づいてセレクターを作成できます。

$('#catselector').on("change", function() {
  $("article").hide();
  $("input[type=checkbox]:checked", this).each(function(){
    $("article." + this.value).show();
  });
});

こちらをご覧ください。

前のコード

$('#catselector').on("change", function() {
  $("input[type=checkbox]", this).each(function(){
    $("." + this.value).toggle(this.checked);
  });
});

于 2013-01-06T19:35:18.130 に答える
0

チェックボックスのclickメソッド内のオブジェクトでjQuery.toggle（）メソッドを使用できます。article.cat

于 2013-01-06T19:37:37.257 に答える
0 
$('input[type="checkbox"]').on('change', function() {
    $("article.category" + this.id[this.id.length - 1]).toggle(this.checked);
});

すべてのチェックボックス（または必要に応じてクラス）をターゲットにして、ID（番号）から最後の文字を取得し、記事のセレクターで使用し、チェックボックスがオンになっているかどうかに基づいてその記事を切り替えます。

于 2013-01-06T19:39:42.543 に答える
0

jquery のトグル機能を使用します。

$('#checkbox1').click(function() {
  $("article.cat1").toggle();
});
$('#checkbox2').click(function() {
  $("article.cat2").toggle();
});
...

作業例: http://jsfiddle.net/SCGyY/

于 2013-01-06T19:35:16.877 に答える
0 
$('#catselector :checkbox').change(function ( e ) {
  // hide all
  $( 'article' ).hide();

  // then filter and show selected
  $( '#catselector :checked' ).each(function() {
      $( 'article.' + this.value ).show();
  });
});

http://jsfiddle.net/t8qHT/14/

于 2013-01-06T19:46:30.033 に答える