时间戳

首页 > 解决方案 > 带有多个参数的 jQuery 过滤

jquery - 带有多个参数的 jQuery 过滤

问题描述

我在这里需要一些帮助，我花了 1 天时间但仍然无法成功。

<div data-src-object="1" data-src-color="blue" data-src-color="green">Product1</div>
<div data-src-object="2" data-src-color="blue" data-src-color="red">Product2</div>
<div data-src-object="3" data-src-color="green">Product3</div>

<div id="filter">
<span class="label label-info" value="blue">Blue</span>
<span class="label label-default" value="red">Red</span>
<span class="label label-default" value="green">Green</span>
</div>


$('div[data-src-object]').filter(function(){ 
return (   )
}).hide();

“仅显示其 data-src-color 作为 .label-info 中的值存在的对象，其余隐藏”

在此示例中，只有产品 1 和产品 2 可见

我认为最接近的是：

$(this).attr('data-src-color')!=$('#filter .label-info').val()

alert($(this).attr('data-src-color'))

但是我注意到警报只显示每个对象的第一种颜色

标签： jqueryfunctionfilter

解决方案

您拥有的一种选择是data-src-color使用逗号分隔值。

//Get all values of elements with class label-info
let val = $(".label-info").map(function() {return $(this).attr('value')}).get();

//Select all data-src-object and show all
//Filter the data
//Hide data-src-object with no color on val variable
$('div[data-src-object]').show().filter(function() {
  let data = $(this).data('src-color').split(',') //Get the src-color data and split to form an array
  return !$(data).filter(val).length;             //If 2 arrays dont have a common value, return as true
}).hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-src-object="1" data-src-color="blue,green">Product1</div>
<div data-src-object="2" data-src-color="blue,red">Product2</div>
<div data-src-object="3" data-src-color="green">Product3</div>

<div id="filter">
  <span class="label label-info" value="blue">Blue</span>
  <span class="label label-default" value="red">Red</span>
  <span class="label label-default" value="green">Green</span>
</div>

推荐阅读