使用 AND 条件而不是使用 JavaScript / jQuery 的 OR 过滤元素答案

【问题标题】：Filter elements with AND condition instead of OR using JavaScript / jQuery使用 AND 条件而不是使用 JavaScript / jQuery 的 OR 过滤元素
【发布时间】：2021-07-10 04:56:58
【问题描述】：

我有代码（感谢@CarstenLøvboAndersen）用于根据 OR 条件过滤元素，我需要将其更改为条件 AND。

此时我选择红色和蓝色的结果是每个具有红色或蓝色类的元素。我需要将其更改为条件，因此当我选择红色和蓝色时，结果必须是同时满足这两个条件的元素。这意味着只有类同时包含红色和蓝色的元素。

$('.selector button').click(function() {
  $('.selector input').prop("checked", false).trigger("change");
});

$('.selector input').change(function() {
  $('.filterelements div').hide();
  $('.selector input:checked').each(function() {
    $('.filterelements div.' + $(this).val()).show();

  })


  if ($('.selector input:checked').length == 0) {
    $('.filterelements div').show();
  }
});

.filterelements {
  width: 210px;
}

.red,
.green,
.blue,
.redgreen,
.redblue {
  width: 50px;
  height: 50px;
  float: left;
  margin: 10px;
}

.red {
  background: #ff2600;
}

.green {
  background: #a5de00;
}

.blue {
  background: #0087ff;
}

.redgreen {
  background: rgb(255, 38, 0);
  background: linear-gradient(90deg, rgba(255, 38, 0, 1) 0%, rgba(165, 222, 0, 1) 100%);
}

.redblue {
  background: rgb(255, 38, 0);
  background: linear-gradient(90deg, rgba(255, 38, 0, 1) 0%, rgba(0, 135, 255, 1) 100%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <div class="selector">
    <button type="button" name="all">Show all</button>
    <input type="checkbox" name="red" value="red">red
    <input type="checkbox" name="blue" value="blue">blue
    <input type="checkbox" name="green" value="green">green
  </div>



  <hr />
  <div class="filterelements">
    <div class="red" rel="color:red"></div>
    <div class="green" rel="color:green"></div>
    <div class="blue" rel="color:blue"></div>
    <div class="redgreen red green" rel="color:red|color:green"></div>
    <div class="green" rel="color:green"></div>
    <div class="red" rel="color:red"></div>
    <div class="redblue red blue" rel="color:red|color:blue"></div>
  </div>
</body>

</html>

【问题讨论】：

标签： javascript jquery filter conditional-statements filtering

【解决方案1】：

你可以使用这个解决方案：

$('.selector input').change(function() {
  var classes = "";
  $(".filterelements div").hide();
  $(".selector input:checked").each(function() {
    classes += "." + $(this).val();
  });
  $(".filterelements div"+classes).show();
});

这将从每个 checked input 中获取值，使用它来生成每个 div 必须具有才能显示的类的集合。

演示

$('.selector button').click(function() {
  $('.selector input').prop("checked", false).trigger("change");
});

$('.selector input').change(function() {
  var classes = "";
  $(".filterelements div").hide();
  $(".selector input:checked").each(function() {
    classes += "." + $(this).val();
  });
  $(".filterelements div"+classes).show();
});

.filterelements {
  width: 210px;
}

.red,
.green,
.blue,
.redgreen,
.redblue {
  width: 50px;
  height: 50px;
  float: left;
  margin: 10px;
}

.red {
  background: #ff2600;
}

.green {
  background: #a5de00;
}

.blue {
  background: #0087ff;
}

.redgreen {
  background: rgb(255, 38, 0);
  background: linear-gradient(90deg, rgba(255, 38, 0, 1) 0%, rgba(165, 222, 0, 1) 100%);
}

.redblue {
  background: rgb(255, 38, 0);
  background: linear-gradient(90deg, rgba(255, 38, 0, 1) 0%, rgba(0, 135, 255, 1) 100%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <div class="selector">
    <button type="button" name="all">Show all</button>
    <input type="checkbox" name="red" value="red">red
    <input type="checkbox" name="blue" value="blue">blue
    <input type="checkbox" name="green" value="green">green
  </div>



  <hr />
  <div class="filterelements">
    <div class="red" rel="color:red"></div>
    <div class="green" rel="color:green"></div>
    <div class="blue" rel="color:blue"></div>
    <div class="redgreen red green" rel="color:red|color:green"></div>
    <div class="green" rel="color:green"></div>
    <div class="red" rel="color:red"></div>
    <div class="redblue red blue" rel="color:red|color:blue"></div>
  </div>
</body>

</html>

【讨论】：

感谢@Andersen +1的解决方案