如何在 jQuery 中根据数据属性值查找元素
答案:使用 CSS Attribute 选择器
您可以使用 CSS 属性选择器 使用 jQuery 根据其数据属性值查找 HTML 元素。 属性选择器提供了一种非常强大的方式来选择元素。
让我们看看下面的例子来了解它是如何工作的:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery 按数据属性选择元素</title>
<style>
ul li {
float: left;
margin: 10px;
list-style: none;
}
ul li img.selected{
outline: 5px solid black;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("select").change(function(){
/* 从下拉列表中获取选定的选项值 */
var slide = $(this).children("option:selected").val();
/* 从图像中删除现有的选定类 */
$(".slides img").removeClass("selected");
/* 根据其 data-slide 属性值选择图像 */
$('.slides img[data-slide=' + slide + ']').addClass("selected");
});
});
</script>
</head>
<body>
<label>Slide:</label>
<select>
<option>select</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<hr>
<ul class="slides">
<li>
<img src="images/club.jpg" alt="Club" data-slide="1">
</li>
<li>
<img src="images/diamond.jpg" alt="Diamond" data-slide="2">
</li>
<li>
<img src="images/spade.jpg" alt="Spade" data-slide="3">
</li>
<li>
<img src="images/heart.jpg" alt="Heart" data-slide="4">
</li>
</ul>
</body>
</html>FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
