Question

编码器。

我正在尝试使用基于星级的评分系统制作一个简单的相册。我正在使用W3上提供的示例，并且使用Font Awesome。但是，这是无响应的，我希望用户可以通过单击星号来更改评分。 IE，如果他单击第四颗星，它将变为四颗星，依此类推。

问题是，我的点击功能没有响应。再往前看，问题似乎在于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>

Answer 1

首先，您必须在每个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")       
  });

也许是可行的。

Answer 2

使用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>

跨度点击功能不起作用（真棒字体星级系统）

2 个答案: