按类将元素匹配到数组并仅显示匹配所有数组值的元素

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 - 定义类型

Radio 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 是错误的。 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> 

这不会以任何方式影响上述解决方案。