javascript - 星级系统问题,需要点击两次才能高亮
问题描述
我的星级评定系统有问题。星级评分运行良好,但只有在我单击两次时才会突出显示该星。例如,如果我想给 3/5 打分,我需要点击星号 3 两次以使其突出显示。如何使其仅单击一次?:/ 谢谢!
function firstRating() {
const star = document.querySelector(".rating").children;
for (let i = 0; i < star.length; i++) {
star[i].addEventListener("click", function() {
for (let j = 0; j < star.length; j++) {
star[j].classList.remove("fa", "fa-star-o");
star[j].classList.add("fa", "fa-star");
}
for (let j = 0; j <= i; j++) {
star[j].classList.remove("fa", "fa-star-o");
star[j].classList.add("fa", "fa-star");
}
});
}
}
function secondRating() {
const star = document.querySelector(".rating_2").children;
for (let i = 0; i < star.length; i++) {
star[i].addEventListener("click", function() {
for (let j = 0; j < star.length; j++) {
star[j].classList.remove("fa", "fa-star-o");
star[j].classList.add("fa", "fa-star");
}
for (let j = 0; j <= i; j++) {
star[j].classList.remove("fa", "fa-star-o");
star[j].classList.add("fa", "fa-star");
}
});
}
}
<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.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="form-group" onclick="firstRating()">
<label class="col-lg-5 col-md-4 control-label" for="firstRating">Experience</label>
<div class="rating col-lg-7" style="float: right">
<input type="hidden" name="rating_1" id="rating_1" value="0" />
<span class="fa fa-star-o" id="rate1"></span>
<span class="fa fa-star-o" id="rate2"></span>
<span class="fa fa-star-o" id="rate3"></span>
<span class="fa fa-star-o" id="rate4"></span>
<span class="fa fa-star-o" id="rate5"></span>
</div>
</div>
<div class="form-group" onclick="secondRating()">
<label class="col-lg-5 col-md-4 control-label" for="secondRating">Speed</label>
<div class="rating_2 col-lg-7" style="float: right">
<input type="hidden" name="rating_2" id="rating_2" value="0" />
<span class="fa fa-star-o" id="ratee1"></span>
<span class="fa fa-star-o" id="ratee2"></span>
<span class="fa fa-star-o" id="ratee3"></span>
<span class="fa fa-star-o" id="ratee4"></span>
<span class="fa fa-star-o" id="ratee5"></span>
</div>
</div>
解决方案
我不确定出了什么问题,但是查看您的代码,我会建议进行一些更改。您应该避免重复函数(例如 firstRating()、secondRating()...)-> 如果您的页面上有 30 个不同的评分怎么办?此外,您的 HTML 很难构建 (id=ratee1, ratee2....) - 如果您有 7 颗星,30 种不同的评级会怎样?你可以在另一个页面/项目中重用它吗?
尝试为您需要在页面中重复的内容创建一个 HTML 模板,然后创建一个使用该模板生成某些内容的函数。
这是一个例子:
function initStarRating() {
var attrName = "starRating",
list = document.querySelectorAll('input[' + attrName + ']');
var buildStarGroup = function(el) {
var parent = el.parentNode,
class_0 = el.getAttribute("class-0"),
class_1 = el.getAttribute("class-1"),
num_stars = el.getAttribute("num-stars");
el.type = "hidden";
el.name = el.getAttribute(attrName);
el.removeAttribute(attrName);
parent.stars = [];
for (let j = 1; j <= num_stars; j++) {
let input = document.createElement("i");
input.className = j <= el.value ? class_1 : class_0;
input.value = j;
parent.appendChild(input);
parent.stars.push(input);
}
parent.onclick = function(e) {
if (parent.stars.indexOf(e.target) < 0)
return;
el.value = e.target.value;
for (let i = 0; i < parent.stars.length; i++)
if (i < el.value)
parent.stars[i].className = class_1;
else
parent.stars[i].className = class_0;
}
}
for (let i = 0; i < list.length; i++) {
buildStarGroup(list[i]);
}
}
/** initialize stars **/
initStarRating();
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="form-group">
<label class="col-lg-5 col-md-4 control-label" for="firstRating">Experience</label>
<div class="rating col-lg-7" style="float: right">
<input starRating="rating_1" num-stars="5" value="1" class-0="fa fa-star-o" class-1="fa fa-star" />
</div>
</div>
<div class="form-group">
<label class="col-lg-5 col-md-4 control-label" for="secondRating">Speed</label>
<div class="rating col-lg-7" style="float: right">
<input starRating="rating_2" num-stars="5" value="3" class-0="fa fa-star-o" class-1="fa fa-star" />
</div>
</div>
我确信这段代码可以改进,但它可以工作,并且应该让您开始构建自己的模板。干杯!
推荐阅读
- python - 如何获取python列表中生成的随机数的位置。?
- javascript - 如何在javascript中删除我的地图标记
- coq - 了解 coq 中证据的归纳
- amazon-web-services - AWS SES/WorkMail:动态创建转发到外部地址的邮箱
- c# - 我可以使用 C# 自动勾选 Internet 选项 > 高级设置 > 安全 > “使用 TLS 1.2”
- php - 我的更新、删除、创建功能不影响数据库
- rest - 如何使用 Rest API 开始构建
- netlify - 如何在netlify中找到IP地址
- powershell - 搜索字符串并替换文件中的整行
- regex - 匹配多个值的正则表达式相同的组