Jquery를 사용하여 별 5개 칭찬을 받는 방법에 대해
- 小云云원래의
- 2017-12-19 17:03:011373검색
전자상거래 웹사이트에서는 별 5개 등급 기능을 자주 사용합니다. 이 글에서는 주로 jquery를 기반으로 별 5개 등급을 구현하는 방법을 자세히 소개합니다. 관심 있는 친구들이 참고하면 좋겠습니다. 모두를 도울 수 있습니다. now jQuery를 사용하여 간단한 demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五角星评分案例</title>
<style>
* {
padding: 0;
margin: 0;
}
.comment {
font-size: 40px;
color: teal;
}
.comment li {
float: left;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
<script src="jquery-1.12.2.js"></script>
<script>
$(function () {
var wjx_k = "☆";
var wjx_s = "★";
//prevAll获取元素前面的兄弟节点，nextAll获取元素后面的所有兄弟节点
//end 方法；返回上一层
//siblings 其它的兄弟节点
//绑定事件
$("li").on("mouseenter", function () {
$(this).html(wjx_s).prevAll().html(wjx_s).end().nextAll().html(wjx_k);
}).on("click", function () {
$(this).addClass("active").siblings().removeClass("active")
});
$("ul").on("mouseleave", function () {
$("li").html(wjx_k);
$(".active").text(wjx_s).prevAll().text(wjx_s);
})
});
</script>
</body>
</html> related 권장 사항을 구현합니다.
jquery 작동 확인란을 구현합니다. 여러 선택을 구현하십시오. 확인되지 않은 인스턴스 포함
위 내용은 Jquery를 사용하여 별 5개 칭찬을 받는 방법에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.