jQueryで特定のクラスの要素をフィルタリングする

Question

私はこれをできるだけ明確にしようとしますので、誰も迷わないようにします。私がしようとしているのは、divのコレクションがあり、そのすべてがdisplay: noneで始まるということです。各divは、異なるクラスのセットを持っていますが、それらはすべてclass="card"を共有し、一部のdivは同じクラスを共有します。ですから、例えば：

<div class="card simple rough arcuate"> 

</div> 

<div class="card simple smooth needle"> 

</div> 

だから私は、それに対応するクラスの一つとチェックボックスがチェックされたときにカードが表示されるようにし、チェックボックスがそれがのいずれかで対応していない場合は消えるjqueryを使用している何をしたいのか、そのクラスがチェックされます。チェックボックスが"simple"のチェックボックスがチェックされている場合、両方ともチェックボックスが表示され、"rough"のチェックボックスをクリックすると、2番目のチェックボックスが消えます。これはこれまで私が試したことです。ただ、ここに後世のために

$('#simple').change(function() { 
    if ($('.card').hasClass('simple') && $('#simple').prop("checked")) { 
    $('.card').show() 
    } else { 
    $('.card').hide() 
    } 
}); 

$('#arcuate').change(function() { 
    if ($('.card').hasClass('arcuate') && $('#arcuate').prop("checked")) { 
    $('.card').show() 
    } else { 
    $('.card').hide() 
    } 
}); 

は、チェックボックスのほんの一部です：

<label><input id="simple" type="checkbox"/>Simple</label> 
<label id="arcuate"><input type="checkbox"/>Arcuate</label> 
<label id="rough"><input type="checkbox"/>Rough</label> 
<label id="smooth"><input type="checkbox"/>Smooth</label> 

Answer 1

あなたはこれを達成できる多くの異なる方法があります。彼らはsiblingsている場合は、jQueryのfilter方法

$('.card').hide().filter('.'+your_class).show(); 

を使用することができます。

$('.card').filter('.'+your_class).show().siblings().hide(); 

Answer 2

クラスセレクタ#myid.myclassドットとidです。あなたの例として、クラスを使用してください。単純化する。

この例では、クラスに表示するデータ属性とクエリを追加しました。 これで、入力やdivを追加したり、コードを変更したりすることなく、チェックされたものを表示するだけです。 idを使ってdivに引っ掛かり、チェックされている値を可視に設定するだけでそれらを選択することに注意してください。

ここにIDの束を維持する必要はありません。

$('.card').toggle(false);// initial hide 
 
$('#toggles').on('change','input[type="checkbox"]',function(event) { 
 
    var checks = $(event.delegateTarget).find('input[type="checkbox"]') 
 
    checks 
 
    .filter(':checked') 
 
    .each(function(){ 
 
     var targets = $(this).data("target"); 
 
     $('.card.'+targets).show(); 
 
    }); 
 
    checks 
 
    .filter(":not(:checked)") 
 
    .each(function(){ 
 
     var targets = $(this).data("target"); 
 
     $('.card.'+targets).hide(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="toggles"> 
 
    <label><input type="checkbox" data-target="simple" />Simple</label> 
 
    <label><input type="checkbox" data-target="arcuate"/>Arcuate</label> 
 
    <label><input type="checkbox" data-target="rough" />Rough</label> 
 
    <label><input type="checkbox" data-target="smooth" />Smooth</label> 
 
    <label><input type="checkbox" data-target="needle" />Needle</label> 
 
</div> 
 
<div class="card simple rough arcuate">simple rough arcuate</div> 
 
<div class="card simple smooth needle">simple smooth needle</div> 
 
<div class="card simple needle">simple needle</div> 
 
<div class="card simple rough">simple rough</div>