jQuery五星好评demo

最新推荐文章于 2022-01-06 20:54:17 发布

原创

最新推荐文章于 2022-01-06 20:54:17 发布 · 2.7k 阅读

收录于

当前文章被以下社区和专栏收录：

本文通过实例代码介绍如何利用jQuery快速创建一个五星好评展示效果，常见于电商网站的用户评价系统。

在电商网站，我们经常会用到五星评分的功能，现在用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("mous

标签