Функция щелчка пролета не работает (потрясающая система оценки шрифтов по звездам) - PullRequest
Новая
       11

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

0 голосов
/ 06 июля 2018

кодеров.

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

0 голосов
/ 06 июля 2018

Используйте 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>
0 голосов
/ 06 июля 2018

Сначала вы должны указать разные идентификаторы в каждом теге 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>

Затем запустите событие щелчка. Нравится следующее: 

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

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

...