匹配元素由类的数组，并只显示匹配所有数组元素的值

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是这样的。

<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

应该是很容易，如果你从正确的角度来看一下吧：

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

这样做是什么让选中的复选框的带班例如列表X，Y和Z并产生一个形式为"X.Y.Z"的字符串。用选择器"p.X.Y.Z"选择元件然后将选择你感兴趣的那个。

See it in action。

让我还指出，给予多个元素相同id像你这里做的是错误的。在DOM中，ID应该是唯一的。如果你想“标签”多个项目，这样就可以对它们作为一组进行操作，只是给他们一个类来代替，例如：

<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> 

这不以任何方式影响上述溶液。