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();
});

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

3 个答案: