javascript - 选择其数据属性中至少有一个值的元素，该元素包含在某个数组中

Question

我正在编写一个过滤函数，其中我需要选择在其数据属性中具有特定值的元素，并将这些值包含在一个数组中，请允许我在示例中进行解释:

比如我有如下三个元素和一个按钮:

<div data-foo="aa,cc,ff" ></div>
<div data-foo="bb,cc,ff" ></div>
<div data-foo="bb,dd,ee" ></div>

<div class="button" data-boo="aa,ff" ></div>

每个元素中的 data-foo 包含以逗号分隔的值。当我点击按钮时，我从它的数据属性中创建了一个数组(myArray 在下面的代码中)，然后我需要选择那些至少有一个的元素myArray 中的值在它们的 data-foo 中，为了清楚的解释，请参见下面的代码:

$( ".button" ).click(function() {

     // First I make an array from the button's data attribute 
     var myArray = $(this).data('boo').split(',');


     // Select should be elements that their da-foo has at least one 
     // — of values in the array above
     var Select = "?"

});

Select 变量如何定位前两个元素，因为第一个元素同时具有“aa”和“ff”，而第二个元素具有“ff”。

我真的尽量把它说得通俗易懂，如果不够清楚，请告诉我，我很乐意解释更多，谢谢。

Answer 1

您可以使用 Attribute Contains Selector :

$( ".button" ).click(function() {
    // First I make an array from the button's data attribute 
    var myArray = $(this).data('boo').split(',');

    // produces array of strings like '[data-foo*="aa"]'
    var selectors = myArray.map(function(value) {
        return '[data-foo*="' + value + '"]';
    });
    // searches by selectors joined by comma, returns all elements
    // that satisfy at least one selector
    var selectedElements = $(selectors.join(','));
});