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

Question

我有很多潜水和多个课程

<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

Answer 2

$('.my-gallery > div').each(() => {
    if ($(this).attr('class').split(' ').some(className => allVals.includes(className))) {
        $(this).show();
    } else {
        $(this).hide();
    }
});

在创建 allVals 数组后直接放置它。 它会遍历您所有的画廊 div，并检查是否至少有一个类属于 allVals。

较旧的 javascript 语法：

$('.my-gallery > div').each(function() {
    if ($(this).attr('class').split(' ').some(function(className) {
        return allVals.indexOf(className) !== -1;
    })) {
        $(this).show();
    } else {
        $(this).hide();
    }
});

Answer 3

试试这个。

在之前的jquery函数中使用你需要处理的元素

$('.with-label').on('click', function(){
  $(this).closest('.with-label').prev(your_element).toggle();
});