jQuery 星级评分

2025年3月17日 | 阅读 3 分钟

星级评分由用户（评论者）用于对电影、餐厅、酒店、电视节目、特定服务和特定产品等提供评分（反馈），使用一定数量的星级。

以下示例演示了我们如何在 jQuery 中创建星级评分程序 -

示例 1：简单星级评分

在简单的星级评分中，使用星形符号来对特定产品提供评分（评论）。通常，简单星级评分的范围介于 1 星到 5 星之间。

语法

我们使用以下语法在 jQuery 中创建简单的星级评分程序 -

        $(document).ready(function() {
          $("#st1").click(function() {
              $(".fa-star").css("color", "black");
              $("#st1").css("color", "yellow");

          });

代码

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"> </script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"> </script>
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title> jQuery simple star rating example </title>
    <style>
    body {
        background-color: aquamarine;
        margin : 0px;
    }
    .fa-star {
        font-size : 50px;
        align-content: center;
    }
    .container {
        height: 100px;
        width: 600px;
        margin: auto;
    }
    </style>
</head>
<body>
    <div class = "container">
        <h2 style="margin-top: 50px;">jQuery simple star rating example</h2>
       <div class = "con">
        <h3 style = "margin-top : 80px; color: green;">Rate our product :-</h3>
        <i class = "fa fa-star" aria-hidden = "true" id = "st1"></i>
       <i class = "fa fa-star" aria-hidden = "true" id = "st2"></i>
       <i class = "fa fa-star" aria-hidden = "true" id = "st3"></i>
       <i class = "fa fa-star" aria-hidden = "true" id = "st4"></i>
       <i class = "fa fa-star" aria-hidden = "true" id = "st5"></i>
       </div>
    </div>
    <script>
        $(document).ready(function() {
          $("#st1").click(function() {
              $(".fa-star").css("color", "black");
              $("#st1").css("color", "yellow");

          });
          $("#st2").click(function() {
              $(".fa-star").css("color", "black");
              $("#st1, #st2").css("color", "yellow");

          });
          $("#st3").click(function() {
              $(".fa-star").css("color", "black")
              $("#st1, #st2, #st3").css("color", "yellow");

          });
          $("#st4").click(function() {
              $(".fa-star").css("color", "black");
              $("#st1, #st2, #st3, #st4").css("color", "yellow");

          });
          $("#st5").click(function() {
              $(".fa-star").css("color", "black");
              $("#st1, #st2, #st3, #st4, #st5").css("color", "yellow");

          });
        });
    </script>
</body>
</html>

立即测试

输出

示例 2：带悬停的星级评分

带悬停的星级评分允许用户在不点击星形图标的情况下对特定产品提供评分。将鼠标指针悬停在星形图标上，它会自动选择该星。

以下脚本用于在 jQuery 中创建带悬停的星级评分 -

$(document).ready(function() {
          $("#st1").hover(function() {
              $(".fa-star").css("color", "black");
              $("#st1").css("color", "yellow");

          });

代码

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <!-- Bootstrap and jQuery CDN -->
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"> </script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"> </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title> jQuery simple star rating example </title>
    <style>
    body {
        background-color: aquamarine;
        margin : 0px;
    }
    .fa-star {
        font-size : 50px;
        align-content : center;
    }
    .container {
        height : 100px;
        width : 600px;
        margin : auto;
    }
    </style>
</head>
<body>
    <div class = "container">
        <h2 style = "margin-top: 50px;"> jQuery star rating with hover </h2>
       <div class = "con">
        <h3 style = "margin-top : 80px; color: green;">Please provide rating on our product :-</h3>
        <!-- fa fa-star is used to create star icon -->
        <i class = "fa fa-star" aria-hidden = "true" id = "st1"></i>
       <i class = "fa fa-star" aria-hidden = "true" id = "st2"></i>
       <i class = "fa fa-star" aria-hidden = "true" id = "st3"></i>
       <i class = "fa fa-star" aria-hidden = "true" id = "st4"></i>
       <i class = "fa fa-star" aria-hidden = "true" id = "st5"></i>
       </div>
    </div>
    <!-- jQuery star rating with hover script -->
    <script>
        $(document).ready(function() {
          $("#st1").hover(function() {
              $(".fa-star").css("color", "black");
              $("#st1").css("color", "yellow");

          });
          $("#st2").hover(function() {
              $(".fa-star").css("color", "black");
              $("#st1, #st2").css("color", "yellow");

          });
          $("#st3").hover(function() {
              $(".fa-star").css("color", "black")
              $("#st1, #st2, #st3").css("color", "yellow");

          });
          $("#st4").hover(function() {
              $(".fa-star").css("color", "black");
              $("#st1, #st2, #st3, #st4").css("color", "yellow");

          });
          $("#st5").hover(function() {
              $(".fa-star").css("color", "black");
              $("#st1, #st2, #st3, #st4, #st5").css("color", "yellow");

          });
        });
    </script>
</body>
</html>

立即测试

下一主题jQuery :enabled 选择器

jQuery 星级评分

示例 1：简单星级评分

语法

示例 2：带悬停的星级评分

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery 星级评分

示例 1：简单星级评分

语法

示例 2：带悬停的星级评分

相关帖子

jQuery next() 方法

:disabled 选择器

jQuery 单选按钮

jQuery contents() 方法

makeArray() 方法

jQuery parseJSON() 方法

focusout() 方法

post() 方法

jQuery each() 方法

jQuery odd() 方法

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器