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">。例如

Radio 1 - 定义类型

Radio 2 - 定义完成

我想调整函数来显示只匹配类型和完成的类，而不是BOTH类型，并且像目前那样单独完成。我基本上卡住了，不知道从哪里开始，任何帮助都会非常感激。

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

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

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

1 个答案: