javascript - 具有多个值的 HTML 数据属性、过滤器

Question

我在页面上有一个 div 列表。我有一个过滤系统，它用可能的值列表填充“数据”元素。

示例:

  <div data-myvalues="value1,value2,value3"></div>
 <div data-myvalues="value2,value3"></div>
 <div data-myvalues="value1,value2"></div>
 <div data-myvalues="value1,value3"></div>

然后我有一些 jQuery 尝试根据一些包含 data-myvalues 属性中的值的选择进行过滤。但是，jQuery 过滤器不太有效，因为我认为它将值视为在值中包含逗号 (,)。
在 jQuery 中，我如何根据 div 是否包含值进行过滤。我目前正在使用 jQuery

 $("div[data-myvalue*='value1']").show();

但由于某种原因，它现在似乎相当有效，如果 data-myvalues 中只有一个值，则 jQuery 可以工作，但如果有多个由逗号分隔的值，则 jQuery 不起作用。

我这里有一个 JS fiddle ，里面有一个简单的示例代码，我正在弄乱它以获得概念验证的工作。 https://jsfiddle.net/ebz3cmjn/1/

有没有更好的方法来列出元素上的值然后过滤它们？

提前致谢。

Answer 1

你可以尝试这样的事情:

$(document).ready(function() {
    $.each($('div'), function(i, v){
       var values = $(v).data('myvalues');
       if(values.indexOf('value1') != -1) {
         $(v).show();
        } else {
          $(v).hide();
       }
     })
  });

以及带有数据值的 html 内容:

<div data-myvalues="value1,value2,value3"></div>
<div data-myvalues="value2,value3"></div>
<div data-myvalues="value1,value2"></div>
<div data-myvalues="value1,value3"></div>

希望这有帮助。