Question

我在页面上有一个div列表。我有一个过滤器系统，它在“ data-”元素中填充了可能的值列表。

示例：

  <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小提琴，上面有一个简单的示例代码，为了使概念证明有效，我在弄弄它。 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>

希望这会有所帮助。

Answer 2

检出代码段；我修改了您的代码，希望能帮助您找到答案；这是一个棘手的答案，但是您可以轻松理解代码

$(document).ready(function(){
	var el = $('input');
	el.each(item =>{
  var attr = el[item].dataset
  if(attr.me.match(/nationman/)){
		el[item].setAttribute('style', 'background-color:yellow')
	}else{
		el[item].setAttribute('style', 'background-color:red')
	}
})
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<input data-me="nationality" type="text" value="Chinese">
<input data-me="nationman" type="text" value="English">
<!--This doesn't work with more than one value-->
<input data-me="nationman, country" type="text" value="Germany">
<input data-me="anothernation" type="text" value="Norwegian">

<p>This selector selects all input fields with the attribute name that contains the string 'nation'.</p>

</body>
</html>

Answer 3

尝试一下，我认为它会起作用

$(document).ready(function(){
  $("input[data-me*='nationman']").css("background-color", "yellow");
  $("input").not("[data-me*='nationman']").css("background-color", "red");
});

Answer 4

> dput(head(data)) structure(list(ID = 1:6, on.tank = c(0, 56, 0, 1, 0, 97), on.main = c(-1, 0, -9, 0, -18, 0)), .Names = c("ID", "on.tank", "on.main"), row.names = c(NA, 6L), class = "data.frame")属性采用了您可以利用的JSON对象。

给出以下元素：

data

您可以根据目标值过滤所需的元素：

<input data-nations='["anothernation", "nationman", "country"]' type="text" value="Germany">

请注意引号之间的两个区别：

var targetNation = "nationman";

$("input[data-nations]")
  .filter(function () {
    // Returns the list as array
    return $(this).data("nations").indexOf(targetNation) > -1;
  })
  .css("background-color", "blue");

Answer 5

尝试使用.not()，方法如下：

$(document).ready(function(){
  $("input[data-me*='nationman']").css("background-color", "yellow");
  $("input").not("[data-me*='nationman']").css("background-color", "red");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input data-me="nationality" type="text" value="Chinese">
<input data-me="nationman" type="text" value="English">
<!--This doesn't work with more than one value-->
<input data-me="nationman,country" type="text" value="Germany">
<input data-me="anothernation" type="text" value="Norwegian">

<p>This selector selects all input fields with the attribute name that contains the string 'nation'.</p>

您还可以使用.each()遍历所有元素：

$(document).ready(function() {
  $('[data-myvalues]').each(function(){
     var values = $(this).data('myvalues');
     if(values.includes('value1'))
      $(this).show();
     else
      $(this).hide();
   })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-myvalues="value1,value2,value3">value1,value2,value3</div>
<div data-myvalues="value2,value3">value2,value3</div>
<div data-myvalues="value1,value2">value1,value2</div>
<div data-myvalues="value1,value3">value1,value3</div>

具有多个值的HTML数据属性，过滤器

5 个答案: