Fatal编程技术网
  • jquery/
  • Jquery Span单击功能不工作（awesome字体星级系统）

Jquery Span单击功能不工作（awesome字体星级系统）

jquery html function

Jquery Span单击功能不工作（awesome字体星级系统）,jquery,html,function,click,font-awesome,Jquery,Html,Function,Click,Font Awesome,编码员 我正在尝试制作一个简单的照片库，带有基于星星的评级系统。我正在使用W3上提供的示例，使用字体Awesome来完成这项工作。但是，这是非响应性的，我希望用户能够通过单击星星来更改评级。如果他点击第四颗星，它将变成四颗星，等等 问题是，我的点击功能没有响应。进一步看，问题似乎在于span标记中没有任何内容。有没有办法解决这个问题，或者我必须使用字体以外的东西来获得一个反应灵敏的星级评定系统 <!DOCTYPE html> <html lang ="en-us"> &l

编码员

我正在尝试制作一个简单的照片库，带有基于星星的评级系统。我正在使用W3上提供的示例，使用字体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>


除弹器
.检查{
颜色：橙色；
}
img{
高度：400px；
宽度：400px；
}
跨度{
显示：内联；
}
























//现在我想做的是，如果你点击一个div的第n个子项，那么
//它和所有以前的孩子。
//表示n（以n为单位）的数字可以类似于数组。长度为
//在for循环中。
//好吧，第一件事是第一件事。我们必须设置一个onClick事件。
$（“span”）。单击（函数（）{
$（this.prop（'checked'，true）；
});
首先，您必须在每个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>
可能是工作了。

使用
index（）
获取当前星号索引，并使用
：lt
伪选择器选择以前的星号

$（'.fa star'）。单击（函数（）{
var i=$（this.index（）；
$（'.checked'）.removeClass（'checked'）；
$（'.fa-star:lt（'+（i+1）+'））.addClass（'checked'）；
});

。选中{颜色：橙色}



定义“响应式星级评级系统”，这意味着如果用户单击第四颗星，例如，它和第一颗星、第二颗星和第三颗星都会变成橙色。请参见我的答案：）

  $("#first").click(function(){
       alert("first start is clicked")       
  });