jQuery学习: lt与gt
程序员文章站
2022-03-30 17:09:50
...
:lt (less than)选择器选取带有小于指定 index 值的元素。
:gt (greater than)选择器选取 index 值高于指定数的元素。
两者的index值都是从0开始,代码用法如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>lt与gt</title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 使用jQuery同时给5个span绑定单击事件
$("#star>span").on("click",function(event){
// 获取当前点击的是第几个span
let index = $(this).index();
// 将选择的span和前面的span染成红色
$(`#star > span:lt(${index + 1})`).css("color","red");
// 将选择到的span后面的span染成黑色
$(`#star > span:gt(${index})`).css("color","#000");
})
})
</script>
</head>
<body>
<p class="t">1</p>
<p class="t s">2</p>
<p class="t">3</p>
<p class="t">4</p>
<p class="t">5</p>
<div id="star">
<span>❤</span>
<span>❤</span>
<span>❤</span>
<span>❤</span>
<span>❤</span>
</div>
</body>
</html>
当我点击第四颗心时，效果如下
上一篇： 如何煲汤好喝
下一篇： 红枣玫瑰枸杞，你了解过吗