Система оценки не работает

-1

<link rel="stylesheet" type="text/css" href="style.css"> 
<link type="text/javascript" src="jquery-1.10.2.min.js"> 
<link type="text/javascript" src="jquery-latest.min.js"> 
<body> 

<div class="rating_box"> 
<div class="star1 rating_stars"></div> 
<div class="total votes">Votes</div> 
</body> 
</html> 
<script> 
$('.ratings_stars').hover(
    // Handles the mouseover 
    function() { 
     $(this).prevAll().andSelf().addClass('ratings_over'); 
     $(this).nextAll().removeClass('ratings_vote'); 
    }, 
    // Handles the mouseout 
    function() { 
     $(this).prevAll().andSelf().removeClass('ratings_over'); 
     set_votes($(this).parent()); 
    } 
); 

</script>

Почему это не работает, когда я наводил указатель мыши. изображение должно измениться, не так ли? Я делаю что-то неправильно с кодом? Пожалуйста, помогите мой стиль КСССистема оценки не работает

.rating_stars 
{ 
    background:url('star_empty.png') no-repeat; 
    height:20px; 
    width:20px; 
    padding:2px; 
    float:left; 
    } 
.ratings_vote 
{ 
background:url('starfull.png') no-repeat; 

}

источник

2014-01-05 Sohil

Зачем использовать JS для этого? Элементу CSS ': hover' будет проще элемент CSS. – Guicara

См. Мой обновленный ответ (ниже) – Guicara

Зачем использовать JS для этого? Пользователю будет удобнее :hover элемент CSS.

HTML

<link rel="stylesheet" type="text/css" href="style.css"> 
<link type="text/javascript" src="jquery-1.10.2.min.js"> 
<link type="text/javascript" src="jquery-latest.min.js"> 

<body> 

<div class="rating_box"> 
    <div class="star1 rating_stars"></div> 
    <div class="total votes">Votes</div> 
</div> 

</body> 
</html>

CSS

.rating_stars { 
    background:url('star_empty.png') no-repeat; 
    height:20px; 
    width:20px; 
    padding:2px; 
    float:left; 
} 

.rating_stars:hover { 
    background:url('starfull.png') no-repeat; 
}

Обновленный ответ:

HTML

<div class="rating_box"> 
    <a id="star1" class="rating_stars"></a> 
    <a id="star2" class="rating_stars"></a> 
    <a id="star3"></a> 
    <a id="star4"></a> 
    <a id="star5"></a> 
    <div class="total votes">Votes</div> 
</div>

CSS

.rating_box a { 
    float:left; 
    padding:2px; 
    height:20px; 
    width:20px; 
    background:url('star_empty.png') no-repeat; 
} 

.rating_stars { background: url('starfull.png') no-repeat; }

JQuery

$(document).ready(function() { 
    $('.rating_box a').click(function() { 
     if (!$(this).hasClass("rating_stars")) { 
      $(this).addClass("rating_stars"); 

      // Make the AJAX call 
      $.ajax({ 
       ... 
      }); 
     } 
    }); 
});

Это не совершенна и не закончить, но это может быть началом чего-то полезного (я думаю) ,

источник

2014-01-05 12:09:58 Guicara

Это хорошо, но я предполагаю, что следующий шаг - позволить пользователю щелкнуть 1-ю, 2-ю, ... звезду, а затем позвонить на сервер, чтобы сохранить голосование ... JS понадобится, поэтому пусть JS все виджет. Nop? – farvilain

Поскольку вы уже используете jQuery, ваш следующий шаг - построить ajax для отправки на сервер. Используйте $ .ajax. Вот руководство по созданию одного: http://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php – Faron

#Faron Когда я наводил верх над звездой, он должен был изменить изображение, не так ли? Является ли высота изображения, определенная на css, что-то делать с ней? – Sohil

Не тестировался, но в соответствии с вашим HTML-коде JS должен быть:

$('.ratings_stars').hover(
    // Handles the mouseover 
    function() { 
     $(this).removeClass('ratings_vote').addClass('ratings_over'); 
    }, 
    // Handles the mouseout 
    function() { 
     $(this).removeClass('ratings_over').addClass('ratings_vote'); 
    } 
);

источник

2014-01-05 12:04:33 sdespont

Пробовал этот код .. не работал для меня/.. я связал файл ... но он не работает! – Sohil

Система оценки не работает

ответ

Смежные вопросы