javascript - 显示和隐藏具有多个类名的 div jquery 复选框

Question

我有很多次潜水和多个类(class)

<div class="my-gallery">
  <div class="LargeFace Neutral Happy"></div>
  <div class="Sad Neutral Happy"></div>
  <div class="LargeFace Surprise Happy"></div>
  <div class="LargeFace Fear Happy"></div>
</div>

我有多个复选框，其中包含所有这些值。例如 LargeFace 或 Happy 等。

<label class="with-label">
  <input id="c_b" type="checkbox" name="r1" value="Neutral" />Neutral
</label>
<label class="with-label">
  <input id="c_b" type="checkbox" name="r1" value="LargeFace">Large Face
</label>

通过这段代码，我将所有这些复选框值获取到一个数组

 $('.with-label').on "click", ->
    allVals = []
    $('.with-label :checked').each ->
    allVals.push $(this).val()
    return
    console.log allVals
 return

现在我真的很努力根据这个数组值过滤我的 div。例如。用户已选中多个复选框并创建一个数组 ["Happy", "Fear"]

我想做一些可以根据该数组过滤#my-gallery的东西。如果数组中有 2 个这些值，那么所有包含该类的 div 都应该出现，其他的应该消失，那么对于其他值呢？那可能吗？请帮助我为此苦苦挣扎了这么久

Answer 1

您可以为值创建一个类选择器，然后将其推送到数组中，而不是将值推送到数组中。

 $('.with-label :checked').each ->
  allVals.push("." + $(this).val())
  return

这将创建数组:

[".LargeFace",".Happy"]

然后使用.join()创建类选择器，遍历到父级并显示它们:

 $('.my-gallery > div').hide(); //hide all first
 $(allVals.join(',')).show(); //show based on array values