クラスごとに配列を配列し、すべての配列の値と一致する要素のみを表示する

Question

複数のチェックボックスをチェックしてチェックされているかどうかを確認してから、<p id="com"> "チェックされた"チェックボックス。ご覧のとおり、この機能はチェックボックスをクリックするたびに実行されます。

function Checked() { 
    var classes = []; 
    $('input:checked').each(function(){ 
    classes.push($(this).attr('class')); 
    }); 
    $('p#com').hide(); 
    for (var i = 0; i < classes.length; i++) { 
    if ($('p#com').hasClass(classes[i])){ 
    $('p.'+classes[i]).show(); 
    } 
    } 
} 
Checked(); 
$(':checkbox').click(Checked); 

基準が変更され、必要なオプションのカテゴリが増えました。今私が持っているのは、ラジオボタンの4つのグループです。したがって、チェック可能な値は最大4つですが、すべての配列値にのみ一致するクラスを持つ<p id="com">のみを表示したいと思います。例

ラジオ1のために - 私は現在、別途ようなタイプや仕上がりに一致するクラスのみではなく、種類や仕上げの両方を表示する機能を適応したい

を終える定義 - ラジオ2

を入力定義そうです。私は基本的に立ち往生していて、ここからどこに行くべきかわからない、どんな助けも大いに評価されるだろう。

新しいhtmlは次のようになります。

var classSelector = $("input:checked") 
        .map(function() { return $(this).attr('class'); }) 
        .get().join('.'); 
$("p." + classSelector).show(); 

これはありませんが、例えばクラスとの確認のチェックボックスのリストを取得することです：あなたは正しい視点から見れば

<div> 
    Type<br /> 
    <input type="radio" name="type" class="manual" />Manual<br /> 
    <input type="radio" name="type" class="modern" />Modern<br /> 
    <input type="radio" name="type" class="thermo" />Thermostatic<br /> 
    <input type="radio" name="type" class="trad" />Traditional 
</div> 
<div> 
    Finish<br /> 
    <input type="radio" name="finish" class="chrome" />Chrome<br /> 
    <input type="radio" name="finish" class="antbrass" />Antique Brass<br /> 
    <input type="radio" name="finish" class="golbra" />Brass - Gold 
</div> 
    <p class="antbrass manual trad" id="com">Content</p> 
    <p class="manual modern chrome" id="com">Content</p> 
    <p class="antbrass manual trad" id="com">Content</p> 
    <p class="manual modern chrome" id="com">Content</p> 

Answer 1

は非常に簡単であるべきX、Y、Zの文字列を生成し、"X.Y.Z"の文字列を生成します。セレクタ"p.X.Y.Z"で要素を選択すると、あなたが興味を持っているだけのいずれかを選択します。

See it in action。

ここで行ったように複数の要素に同じidを指定していることが間違っています。です。 IDはDOM内で一意でなければなりません。あなたがグループとしてそれらを操作できるように、「タグ」に複数のアイテムをしたい場合は、単にたとえば、代わりに彼らにクラスを与える：

<p class="com antbrass manual trad">Content</p> 
<p class="com manual modern chrome">Content</p> 
<p class="com antbrass manual trad">Content</p> 
<p class="com manual modern chrome">Content</p> 

これは、どのような方法で上記の解決策には影響を与えません。