0

Подскажите, пожалуйста, как можно реализовать вывод "звездочек" в рейтинге, в зависимости от того, чему он равен? Т.е. если рейтинг 1, то 1 звезда закрашена, а остальные серые и т.д.

На данный момент есть только такой кривой код, в котором не работает вывод изначального рейтинга.

<script>
    $(document).ready(function () {
        $('.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');
                // can't use 'this' because it wont contain the updated data
                set_votes($(this).parent());
            }
        );
    });

    function getStars() {
        var stars = 0;
        $.ajax({
            type: "POST",
            url: "../lib/ajax.php",
            data: {
                send: getStars
            },
            cache: false,
            success: function (s) {
                alert("Stars = " + s);
            }
        })
        getStars();

        function addRate(r) {
            alert("Data Saved: " + r);
        }
    }
</script>
<div class='movie_choice'>
    <div id="r1" class="rate_widget">
        <div class="star_1 ratings_stars" onclick="addRate(10)"></div>
        <div class="star_2 ratings_stars" onclick="addRate(20)"></div>
        <div class="star_3 ratings_stars" onclick="addRate(30)"></div>
        <div class="star_4 ratings_stars" onclick="addRate(40)"></div>
        <div class="star_5 ratings_stars" onclick="addRate(50)"></div>
    </div>
</div>

1 ответ 1

2

Смотрите такой пример. "Подпилить" под свой проект, я надеюсь, что сможете уже сами.

var stars = $('#rating span'),
    startRating = 2;
stars.on({
    mouseenter: setRating,
    mouseleave: function(){
        setRating(false, startRating);
    },
    click: function(){
        startRating = $(this).index() + 1;
    }
});
function setRating(e, indx){
    var indx  = indx || $(this).index() + 1;
    stars.each(function(i, el){
        $(el)[i < indx ? 'addClass' : 'removeClass']('highlight');
    });
    return false;
}
// При загрузке страницы, если есть значение рейтинга
setRating(false,startRating);
8
  • В том то и проблемма, я не могу настроить получение текущего рейтинга. 22 июн 2014 в 7:11
  • 1
    @wao138, генерируя страницу, добавляйте текущий рейтинг, например, в атрибут data-* и из него же получаете. Вот [измененный пример][1]. Есть конечно вариант с ajax-ом, но в данном случае, первого способа будет вполне достаточно. [1]:jsfiddle.net/Deonis/J3Q3G/3
    – Deonis
    22 июн 2014 в 9:05
  • 1
    Или расположите код в самом низу страницы, до закрывающего тега </body> или оберните в DOM-Ready $(function(){ // тут код });
    – Deonis
    22 июн 2014 в 13:33
  • 1
    @wao138, где посмотреть - не знаю.)) Такие мелочи пишутся своими ручками в течениии нескольких минут. Только вопрос - а надо ли это в данном случае? Смотрите [такой примерчик][1]. Ясное дело, что в песочнице, я получаю значение, которое и отправляю, а вам надо написать серверную часть, где по запросу будет вытаскиваться рейтинг из БД и возвращаться ответом. С дробными числами сложнее. В плане того, что на CSS сложновато сделать половинки звезд. Чаще всего используются изображения, которые бекграундом подставляются в нужные элементы. [1]:jsfiddle.net/Deonis/J3Q3G/4
    – Deonis
    22 июн 2014 в 14:08
  • 1
    @wao138, да, конечно это возможно, но писать с нуля не имеет смысла, т.к. эти вещи уже давно реализованы и не в единичном варианте. К примеру, [этот плагин][1] позволяет реализовать всё то, что вы задумали. > И вопрос по коду, все ли правильно? Скорее всего, что в ответе приходит не число. Тут надо разбираться с серверной частью. [1]:wbotelhos.com/raty
    – Deonis
    22 июн 2014 в 18:11

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.