Функция щелчка по экрану не работает (удивительная система рейтинга шрифтов)

кодеры.

Я пытаюсь сделать простую фотогалерею со звездной рейтинговой системой. Я использую пример, предложенный на 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>

jquery,html,function,click,font-awesome,

0

Ответов: 2


0

Сначала вам нужно указать разные идентификаторы в каждом теге span. Как это :

<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")       
  });

Может быть, это сработало.


0

Используйте, 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>

JQuery, HTML, функция, нажмите, шрифт-удивительным,
Похожие вопросы