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>

，并在<span>属性的值与视频someattr的值不同的情况下，向src添加.link类。

我正在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");
}
}

属性比较jQuery中的字符串

2 个答案: