jQuery基于多个数据属性过滤div

Question

我在一个页面上有多个具有以下数据属性的 div：数据一、数据二、数据三、数据四和数据五。以下代码创建一个数组，如下所示： ['一值', '二值', '三值', '四值', '五值'] 取决于在五个值中选择哪些值下拉菜单。构建数组已全部排序并正常工作。

但是有些 div 有多个数据属性值，即 data-one="one-value,one-value-2,one-value-3"

如果 div 只包含一个数据属性值 - 似乎工作正常 - 但当存在多个用逗号分隔的值时，它不起作用。

任何帮助将不胜感激！

            var filterList = [];

            jQuery("#jsonFilters ul#one ul li a.active").each(function () {
                var dataOne = jQuery(this).attr("data-one");
                filterList.push(dataType);
            });

            jQuery("#jsonFilters ul#two ul li a.active").each(function () {
                var dataTwo = jQuery(this).attr("data-two");
                filterList.push(dataTwo);
            });

            jQuery("#jsonFilters ul#three ul li a.active").each(function () {
                var dataThree = jQuery(this).attr("data-three");
                filterList.push(dataThree);
            });

            jQuery("#jsonFilters ul#four ul li a.active").each(function () {
                var dataFour = jQuery(this).attr("data-four");
                filterList.push(dataFour);
            });

            jQuery("#jsonFilters ul#five ul li a.active").each(function () {
                var dataFive = jQuery(this).attr("data-five");
                filterList.push(dataFive);
            });

            if (filterList.length == 0) {
                jQuery('.div').removeClass('hidden');
                jQuery('.div').fadeIn();
                console.log('No Filters');
            } else {
                jQuery('.div').each(function () {
                    offeringOne = jQuery(this).attr('data-one');
                    offeringTwo = jQuery(this).attr('data-two');
                    offeringThree = jQuery(this).attr('data-three');
                    offeringFour = jQuery(this).attr('data-four');
                    offeringFive = jQuery(this).attr('data-five');

                    if (jQuery.inArray(offeringOne, filterList) != -1 && jQuery.inArray(offeringTwo, filterList) != -1 && jQuery.inArray(offeringThree, filterList) != -1 && jQuery.inArray(offeringFour, filterList) != -1 && jQuery.inArray(offeringFive, filterList) != -1) {
                        jQuery(this).fadeIn('slow');
                    } else {
                        jQuery(this).hide();
                    }

                });
            }

Answer 1

由于您的数据属性值包含表示以逗号分隔的产品列表的字符串值，因此您需要

split

将这些值放入数组中，以便可以将 each 产品值与

filterList

进行比较。

您可以将您的

jQuery('.div').each

处理程序重写为如下所示：

var filterList = [
  'one-value',
  // 'one-value-2'
];

if (filterList.length == 0) {
  jQuery('.div').removeClass('hidden');
  jQuery('.div').fadeIn();
  console.log('No Filters');
} else {
  jQuery('.div').each(function() {
    const isVisible = ['data-one', 'data-two', 'data-three', 'data-four', 'data-five'].some(attr => {
      const attrValue = jQuery(this).attr(attr);
      if (!attrValue) { return; }

      const offerings = attrValue.split(',');
      
      return filterList.some(offering => offerings.indexOf(offering) > -1);
    });
    
    if (isVisible) {
      jQuery(this).fadeIn('slow');
    } else {
      jQuery(this).hide();
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div" data-one="one-value,one-value-2,one-value-3">
  Div One
</div>
<div class="div">
  Div Two
</div>
<div class="div" data-one="one-value">
  Div Three
</div>
<div class="div">
  Div Four
</div>
<div class="div" data-one="one-value-2">
  Div Five
</div>