javascript - 通过比较数组从 DOM 中查找单词

Question

我需要比较数组中的 voice 属性，但不知道该怎么做 我使用了 forEach、$.inArray 但没有'取得任何成功。

我需要做的是首先获取 voice 属性值并将其与数组项进行比较。然后，如果该词与数组中的一项匹配，我就更改我的 CSS。

HTML:

<div voice="play">Play</div>
<div voice="test">Pause</div>
<div voice="stop">Stop</div>

JS:

var word = ['plays', 'play', 'clay', 'lay']
var command = $("[voice]").filter(function() {
    return $(this).attr('voice') == word.forEach()
});
console.log(command);
var attr_array;
if (command.length) {
    attr_array = command.attr('voice');
}
if (attr_array.length) {
    command.css({
        'color': 'red'
    });
} else {
    console.log("command did not match!");
}

只是我想知道如何将我的数组与属性的值进行比较。

Answer 1

您可以使用 indexOf()检查元素的属性是否在 word 中还是不是。

var word = ['plays', 'play', 'test', 'lay']

$("[voice]").filter(function() {
    return  word.indexOf($(this).attr('voice')) > -1
  }).css("color", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div voice="play">Play</div>
<div voice="test">Pause</div>
<div voice="stop">Stop</div>

然而，如果你想在元素的属性不在数组中时做其他事情word , each()会比filter好.过滤器仅返回属性为 voice 的元素在数组 word 中而each将遍历所有元素。

var word = ['plays', 'play', 'test', 'lay']
$("[voice]").each(function() {
    if( word.indexOf($(this).attr('voice')) > -1){
      $(this).css("color","red");
    }
    else{
      //something else
    }
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div voice="play">Play</div>
<div voice="test">Pause</div>
<div voice="stop">Stop</div>