Span点击功能不起作用(很棒的字体星级系统)
Span点击功能不起作用(很棒的字体星级系统)
提问于 2018-07-06 13:49:51
编码员。
我正在尝试做一个简单的图片库和一个基于星级的评分系统。我正在使用W3上提供的示例，使用Font Awesome来完成这项工作。但是，这是无响应的，我希望用户能够通过单击星星来更改评级。如果他点击第四颗星，它就会变成四星，以此类推。
问题是，我的点击功能没有响应。进一步看，似乎问题在于span标记中没有任何内容。有没有办法绕过这个问题，或者我必须使用除字体之外的其他东西来获得响应性的星级系统？
<!DOCTYPE html>
<html lang ="en-us">
<head>
<meta charset="UTF-8">
<title>Bomb Defuser</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.checked {
color: orange;
}
img {
height:400px;
width: 400px;
}
span {
display:inline;
}
</style>
<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.3.1/jquery.min.js">
</script>
</head>
<body>
<img src = "camera.png"></img>
<br>
<div id = "rating1">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<hr>
<br>
<br>
<img src = "bomb.png"></img>
<br>
<div id = "rating2">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<hr>
<br>
<br>
<img src = "dummy_image.png"></img>
<br>
<div id = "rating3">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<hr>
<br>
<br>
<script>
//now what I'm trying to do, is say if you click the nth child of a div, so
//does it and all previous children.
//the number that represents the n in nth can be like the array.length is
//in a for loop.
//okay, first thing is first. We have to set up an onClick event.
$("span").click(function(){
$(this).prop('checked', true);
});
</script>
</body>
</html>回答 2
Stack Overflow用户
发布于 2018-07-06 17:09:17
使用index()获取当前星标，使用:lt伪选择器选择之前的星标
$('.fa-star').click(function(){
var i = $(this).index();
$('.checked').removeClass('checked');
$('.fa-star:lt('+(i+1)+')').addClass('checked');
});.checked {color:orange};<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id = "rating1">
<span class="fa fa-star"></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>
</div>
Stack Overflow用户
发布于 2018-07-06 17:00:15
首先，您必须在每个span标记中提供不同的id。如下所示：
<span id="first" class="fa fa-star checked"></span>
<span id="second" class="fa fa-star checked"></span>
<span id="third" class="fa fa-star checked"></span>
<span id="fourth" class="fa fa-star"></span>
<span id="fifth" class="fa fa-star"></span> 然后，激发它的click事件。如下所示：
$("#first").click(function(){
alert("first start is clicked")
});也许它是有效的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51203743
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号