以具有特定数据属性值的元素为目标

Question

请您看一看这段代码，让我知道如何使用.click()的特定数据属性将HD添加到a链接中。

​

if ($(a).data("quality") == "HD") {
  $(this).click();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="stream">
  <li><a data-quality="L">Low</a></li>
  <li><a data-quality="M">Med</a></li>
  <li><a data-quality="HD">HD</a></li>
</ul>

​

Answer 1

使用属性选择器

​

$("a[data-quality=HD]").click();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="stream">
  <li><a data-quality="L">Low</a></li>
  <li><a data-quality="M">Med</a></li>
  <li><a data-quality="HD">HD</a></li>
</ul>

​

Answer 2

你可以利用属性选择器

$('a[data-quality="HD"]').click(function() {
    //do something
});

Answer 3

可以使用数据质量属性直接将单击绑定到锚上。

Demo

​

$("a[data-quality='HD']").click( function(){
  console.log($(this).text()) 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="stream">
  <li><a data-quality="L">Low</a></li>
  <li><a data-quality="M">Med</a></li>
  <li><a data-quality="HD">HD</a></li>
</ul>

​