如何解决我想在javascript中创建响应式星级
这是我的HTML
<div id="starRatings">
<span class="fa fa-star checked"></span>
<span class="fa fa-star "></span>
<span class="fa fa-star "></span>
<span class="fa fa-star "></span>
<span class="fa fa-star "></span>
这是我的Javascript
const starRating = $("#starRatings").children();
for (let i = 0; i < starRating.length; i++) {
starRating[i].addEventListener("mouseover",function() {
for (let j = 1; j <= starRating.length; j++) {
$(starRating[j]).removeClass("checked");
}
for (let j = 1; j> i; j--) {
$(starRating[j]).addClass("checked");
console.log(starRating[j])
}
});
starRating[i].addEventListener("mouseleave",function() {
for (let j = 1; j <= starRating.length; j++) {
$(starRating[j]).addClass("checked");
console.log(j)
}
for (let j = 1; j> i; j--) {
$(starRating[j]).removeClass("checked");
console.log(j)
}
});
starRating[i].addEventListener("click",function() {
for (let j = 1; j <= starRating.length; j++) {
$(starRating[j]).addClass("checked");
}
for (let j = 1; j> i; j--) {
$(starRating[j]).removeClass("checked");
}
});
}
检查的班级仅使星星变成橙色,而我希望任何时候都保持橙色。我希望其他人在进入鼠标时将其变成橙色,并在离开鼠标时恢复为灰色,并且当用户实际要单击多个星星时,即使在离开鼠标后它们仍保持橙色,为此我猜测我需要在某处使用if语句
我意识到这应该很简单,循环的次数太多了,但是我失去了理智! 有人可以帮忙吗?
解决方法
我可以用jquery给你一个例子
https://jsfiddle.net/mp4oze3f/
CSS
.et-app-sr {
border: 0;
clip: rect(1px,1px,1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important
}
.et-app-rating-stars {
height: 4em;
display: flex
}
.et-app-rating-star {
background: none;
border: none;
box-shadow: none;
font-size: 3.4em;
cursor: pointer;
}
.et-app-rating-star .selected {
display: none;
color: #edff71
}
.et-app-rating-star.select i,.et-app-rating-star.highlight i {
display: none
}
.et-app-rating-star.select .selected,.et-app-rating-star.highlight .selected {
display: block
}
.et-app-rating-star:focus {
outline: 1px solid #000
}
JS(jQuery)
$('[data-star]').on('click',function(e) {
e.preventDefault();
$(this).addClass('select');
$(this).prevAll('[data-star]').addClass('select');
$(this).nextAll('[data-star]').removeClass('select');
$(this).parent().find('input').val($(this).data('star'));
});
$('[data-star]').on('mouseover',function(e) {
e.preventDefault();
$(this).addClass('highlight');
$(this).prevAll('[data-star]').addClass('highlight');
$(this).nextAll('[data-star]').removeClass('highlight');
});
$('[data-star]').on('mouseout',function(e) {
e.preventDefault();
$(this).removeClass('highlight');
$(this).prevAll('[data-star]').removeClass('highlight');
});
HTML
<div class="et-app-rating-stars">
<input type="hidden">
<button class="et-app-rating-star" data-star="1">
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star selected" aria-hidden="true"></i>
<span class="et-app-sr">Rating: 1 star</span>
</button>
<button class="et-app-rating-star" data-star="2">
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star selected" aria-hidden="true"></i>
<span class="et-app-sr">Rating: 2 star</span>
</button>
<button class="et-app-rating-star" data-star="3">
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star selected" aria-hidden="true"></i>
<span class="et-app-sr">Rating: 3 star</span>
</button>
<button class="et-app-rating-star" data-star="4">
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star selected" aria-hidden="true"></i>
<span class="et-app-sr">Rating: 4 star</span>
</button>
<button class="et-app-rating-star" data-star="5">
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star selected" aria-hidden="true"></i>
<span class="et-app-sr">Rating: 5 star</span>
</button>
</div>
我用了比您需要的更多的东西,我更改了图标,您可以查看逻辑并做类似的事情
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。