js实现简单的星级选择器提交效果适用于评论等

yizhihongxing

下面是详细的攻略:

JS实现简单的星级选择器提交效果

1. HTML部分

首先,需要在HTML中添加星级选择器的结构,一般是通过多个图标或文字来表示不同的星级:

<div class="star-rating">
  <span class="star" data-star="1">&#9733;</span>
  <span class="star" data-star="2">&#9733;</span>
  <span class="star" data-star="3">&#9733;</span>
  <span class="star" data-star="4">&#9733;</span>
  <span class="star" data-star="5">&#9733;</span>
</div>

这里使用了一个div元素作为星级选择器的容器,内部包含了5个span元素作为星级图标或文字,每个span元素都有一个data-star属性表示对应的星级。

同时,在HTML中还需要添加一个用于显示当前选择的星级的元素,一般是一个隐藏的input元素:

<input type="hidden" name="rating" id="rating" value="">

2. CSS部分

为了让星级选择器看起来更加美观,需要对其进行一定的样式设置。例如,可以使用CSS将星级图标变成黄色、灰色交替的效果,以及设置鼠标移动到某个星级图标上时,显示高亮效果:

.star {
  font-size: 30px;
  color: #bbb;
  cursor: pointer;
}
.star.yellow {
  color: #ffc107;
}
.star:hover,
.star:hover ~ .star {
  color: #ffc107;
}

3. JS部分

最后,使用JS实现星级选择器的交互效果和提交数据的功能。

首先,需要用JS获取到所有的星级图标元素,监听它们的鼠标事件,以及获取用于显示当前选择的星级的元素:

var stars = document.querySelectorAll('.star');
var ratingInput = document.getElementById('rating');

然后,添加鼠标事件监听函数,实现当鼠标点击某个星级图标时,将该图标以及之前的所有图标变成黄色,同时更新当前选择的星级的值:

stars.forEach(function(star) {
  star.addEventListener('click', function() {
    var rating = this.getAttribute('data-star');
    for (var i = 0; i < stars.length; i++) {
      if (i < rating) {
        stars[i].classList.add('yellow');
      } else {
        stars[i].classList.remove('yellow');
      }
    }
    ratingInput.value = rating;
  });
});

这样,就完成了星级选择器的交互效果和提交数据的功能。

4. 示例说明

以下是两个示例说明:

示例1:基本使用

在评论区中添加星级选择器,在提交评论时将星级一并提交。

实现步骤:

  1. 首先在HTML中添加星级选择器和用于显示当前选择的星级的元素。

  2. 在CSS中添加星级选择器的样式。

  3. 在JS中添加星级选择器的交互效果和提交数据的功能。

最终代码如下:

HTML:

<div class="star-rating">
  <span class="star" data-star="1">&#9733;</span>
  <span class="star" data-star="2">&#9733;</span>
  <span class="star" data-star="3">&#9733;</span>
  <span class="star" data-star="4">&#9733;</span>
  <span class="star" data-star="5">&#9733;</span>
</div>
<input type="hidden" name="rating" id="rating" value="">

CSS:

.star {
  font-size: 30px;
  color: #bbb;
  cursor: pointer;
}
.star.yellow {
  color: #ffc107;
}
.star:hover,
.star:hover ~ .star {
  color: #ffc107;
}

JS:

var stars = document.querySelectorAll('.star');
var ratingInput = document.getElementById('rating');
stars.forEach(function(star) {
  star.addEventListener('click', function() {
    var rating = this.getAttribute('data-star');
    for (var i = 0; i < stars.length; i++) {
      if (i < rating) {
        stars[i].classList.add('yellow');
      } else {
        stars[i].classList.remove('yellow');
      }
    }
    ratingInput.value = rating;
  });
});

示例2:动态生成

根据后端返回的数据动态生成星级选择器,在提交时将星级一并提交。

实现步骤:

  1. 发送ajax请求,从后端获取需要生成的星级数量。

  2. 根据返回的数量动态生成星级选择器和用于显示当前选择的星级的元素。

  3. 在CSS中添加星级选择器的样式。

  4. 在JS中添加星级选择器的交互效果和提交数据的功能。

最终代码如下:

HTML:

<div id="star-container"></div>
<input type="hidden" name="rating" id="rating" value="">

CSS:

.star {
  font-size: 30px;
  color: #bbb;
  cursor: pointer;
}
.star.yellow {
  color: #ffc107;
}
.star:hover,
.star:hover ~ .star {
  color: #ffc107;
}

JS:

var starContainer = document.getElementById('star-container');
var ratingInput = document.getElementById('rating');
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var starsCount = parseInt(this.responseText);
    for (var i = 1; i <= starsCount; i++) {
      var star = document.createElement('span');
      star.classList.add('star');
      star.setAttribute('data-star', i);
      star.innerHTML = '&#9733;';
      starContainer.appendChild(star);
    }
    var stars = document.querySelectorAll('.star');
    stars.forEach(function(star) {
      star.addEventListener('click', function() {
        var rating = this.getAttribute('data-star');
        for (var i = 0; i < stars.length; i++) {
          if (i < rating) {
            stars[i].classList.add('yellow');
          } else {
            stars[i].classList.remove('yellow');
          }
        }
        ratingInput.value = rating;
      });
    });
  }
};
xmlhttp.open('GET', 'stars.php', true);
xmlhttp.send();

这样,就可以根据后端返回的数据动态生成星级选择器,以及实现交互效果和提交数据的功能。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js实现简单的星级选择器提交效果适用于评论等 - Python技术站

(0)
上一篇 2023年6月16日
下一篇 2023年6月16日

相关文章

  • Android下拉阻尼效果实现原理及简单实例

    下面我将详细讲解“Android下拉阻尼效果实现原理及简单实例”的完整攻略。 Android下拉阻尼效果实现原理 原理介绍 下拉阻尼效果是指在下拉列表或者下拉刷新等场景中,当用户下拉视图时,视图能够随手指的滑动而进行拉伸或缩放,形成一种类似于弹簧效果的体验。 实现该效果的原理是利用滑动事件监听,根据手指滑动时的位移量以及速度,计算出视图需要滑动的距离,然后对…

    Java 2023年5月23日
    00
  • 利用java实现一个客户信息管理系统

    利用Java实现客户信息管理系统攻略 系统设计思路 客户信息管理系统主要是为了方便企业记录并管理客户信息数据,并用于后续的数据分析和处理等工作。 在系统设计中,我们需要考虑以下几个方面: 数据库设计 客户信息管理系统需要存储大量的客户数据,因此需要设计合理的数据库结构。通常可以使用MySQL或者Oracle等关系型数据库进行实现。在设计数据库时,需要考虑到数…

    Java 2023年5月19日
    00
  • Struts2的配置 struts.xml Action详解

    当我们用Struts2来开发Web应用程序时,需要进行相关的配置,其中最主要的配置文件就是struts.xml。在这个文件中,我们需要配置Action以及对应的Result、Interceptor等等。 下面是struts.xml的一个简单示例: <?xml version="1.0" encoding="UTF-8&qu…

    Java 2023年5月20日
    00
  • java通过url读取文件内容示例

    下面是“Java通过URL读取文件内容示例”的完整攻略。首先,我们需要了解一下读取文件的过程: 获取文件的URL地址; 通过URL对象打开连接,获得输入流; 通过输入流读取文件的内容; 关闭输入流,关闭连接。 接下来,我们来看两条示例。 示例1:通过URL读取文本文件 import java.io.*; import java.net.*; public c…

    Java 2023年5月19日
    00
  • java String[]字符串数组自动排序的简单实现

    下面是 “java String[]字符串数组自动排序的简单实现” 的完整攻略: 1. 问题背景 对于 Java 开发者而言,经常需要进行字符串数组的排序操作。比如,将一组字符串按照字母表顺序进行排序。手动实现这些排序操作需要编写很多代码,而且难以维护。本文将介绍一个简单的实现方法,通过调用系统自带的 Arrays.sort() 方法来实现字符串数组的自动排…

    Java 2023年5月26日
    00
  • Spring Security 自动踢掉前一个登录用户的实现代码

    当一个用户已经登录了系统,但是另一个用户使用相同的账号登录时,为了安全起见,一般需要自动踢掉前一个用户。Spring Security 为开发者提供了一些较为方便且易于理解的方式来实现这个功能。 基于SessionRegistry来实现 Spring Security提供了SessionRegistry来帮助我们管理用户的Session,我们可以使用这个类来…

    Java 2023年5月20日
    00
  • java开发就业信息管理系统

    Java开发就业信息管理系统攻略 1. 确认需求和功能 在开发Java开发就业信息管理系统之前,需要明确系统的需求和功能,例如: 用户管理:包括用户注册、用户登录、用户信息管理等; 招聘信息管理:包括发布招聘信息、浏览招聘信息、投递简历等; 简历管理:包括填写个人简历、上传附件等; 等等。 2. 构建数据库 根据系统的需求和功能,设计相应的数据库结构,包括多…

    Java 2023年5月30日
    00
  • SpringBoot教程_创建第一个SpringBoot项目

    以下是创建第一个SpringBoot项目的完整攻略,包含两条示例: 一、前置条件 在开始创建SpringBoot项目之前,请确认你已经完成以下步骤: 安装好Java开发环境。建议使用JDK8及以上版本。 安装好Maven构建工具。 二、创建SpringBoot项目 1. 使用Spring Initializr创建项目 首先,我们使用Spring Initia…

    Java 2023年5月15日
    00
合作推广
合作推广
分享本页
返回顶部