javascript - 选择具有类的精确组合的元素

Question

我已经在 this post 以某种方式问过这个问题但事实证明我在寻找错误的解决方案!我的错!

如您所见，我正在寻找一种仅显示具有数组值组合的div 的解决方案。例如，在此演示中，输出将是 3 个 div，分别为 Has Q、Has M 和 Has Q & M BUT 我只需要显示 Has Q & M，它在 div 中包含数组元素的所有组合

$('.A.W.B').css("background-color", "red");
let mopt = ['Q','M'];

$('.box').not(
  mopt.map(function(className){ return '.'+ className; }).join(', ')
).hide();

.box {
  height: 20px;
  background: khaki;
  width: 100px;
  text-align:center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4> Should Display Only the Div which Has 'Q' <strong>AND </strong> 'M' together</h4>

<div class="box A B F  R W Q">Has Q</div>
<div class="box A B F H K F">No Q</div>
<div class="box A B F W R">No Q</div>
<div class="box A B F H K F">No Q</div>
<div class="box A B F W R M">Has M</div>
<div class="box A B F H K F">No Q</div>
<div class="box A B Q F H  M K F">Has Q & M</div>

<p> but it is displaying all boxes which have part of `mopt` array</p>

Answer 1

当用逗号分隔选择器时，它将充当 multiple selectors意味着他们每个人都充当一个选择器。要组合在一起，请在没有任何空格的情况下将它们连接起来。

$('.A.W.B').css("background-color", "red");
let mopt = ['Q','M'];

$('.box').not(
  mopt.map(function(className){ return '.'+ className; }).join('')
).hide();

.box {
  height: 20px;
  background: khaki;
  width: 100px;
  text-align:center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4> Should Display Only the Div which Has 'Q' <strong>AND </strong> 'M' together</h4>

<div class="box A B F  R W Q">Has Q</div>
<div class="box A B F H K F">No Q</div>
<div class="box A B F W R">No Q</div>
<div class="box A B F H K F">No Q</div>
<div class="box A B F W R M">Has M</div>
<div class="box A B F H K F">No Q</div>
<div class="box A B Q F H  M K F">Has Q & M</div>

<p> but it is displaying all boxes which have part of `mopt` array</p>

引用:

Selecting Elements | JQuery

Simple Selectors | MDN