属性比较jquery中的字符串

Question

我正在尝试比较一些元素的属性内容，例如：

<video id="videoarea" src="content1"></video>
<span class="videoquality" someattr="content2">link1</span>
<span class="videoquality" someattr="content3">link2</span>
<span class="videoquality" someattr="content4">link3</span>

并且当.link属性的值不同于视频<span>值时，将someattr类添加到src。

我是在jquery中这样做的：

<script>
var lecturl = $("#videoarea").attr("src") ;
$( ".videoquality[someattr!=$(lecturl)]" ).addClass("link");
</script>

但这行不通..。我似乎找不到原因。我在这里做错了什么？谢谢

Answer 1

首先，请注意，如果您在元素上创建自己的属性，将导致无效的HTML。如果需要在元素中存储自定义数据，请改用data-*。

您的实际问题是因为字符串插值只有在使用模板文字时才能在Javascript中使用。要分隔模板文字，请使用反引号(``)，然后将值放在${}中，如下所示：

​

var lecturl = $("#videoarea").attr("src") ;
$(`.videoquality[data-someattr!="${lecturl}"]`).addClass("link");

.link { color: #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="videoarea" src="content1"></video>
<span class="videoquality" data-someattr="content2">link1</span>
<span class="videoquality" data-someattr="content3">link2</span>
<span class="videoquality" data-someattr="content4">link3</span>

​

然而，你应该知道在IE中完全不支持模板文字(没有polyfill)。如果你需要IE支持，那么最简单的方法就是使用传统的字符串连接：

​

var lecturl = $("#videoarea").attr("src") ;
$('.videoquality[data-someattr!="' + lecturl + '"]').addClass("link");

.link { color: #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="videoarea" src="content1"></video>
<span class="videoquality" data-someattr="content2">link1</span>
<span class="videoquality" data-someattr="content3">link2</span>
<span class="videoquality" data-someattr="content4">link3</span>

​

Answer 2

遍历所有元素并检查它们的属性。

var lecturl = $("#videoarea").attr("src");
  for(i=0;i < $(span).length-1;i++){
   if($("span")[i].getAttribute("someattr") != lecturl){
    $("span")[i].addClass("link");
}
}