Сообщение рейтинга звезд jQuery отражается на всех элементах - PullRequest
Новая
       5

Сообщение рейтинга звезд jQuery отражается на всех элементах

0 голосов
/ 29 апреля 2019

Я создал рейтинг звезд в jQuery, но, например, когда я оцениваю первый элемент (например, 2 звезды), сообщение, отражающее этот рейтинг, будет отображаться на всех элементах, даже если они не оценены.Это часть jQuery, которая создает HTML 

'<section  class ="rating-widget"><div class="rating-stars text-center"><ul id="stars"><li class="star" title="Poor" data-value="1"><i class="fa fa-star fa-fw"></i></li><li class="star" title="Fair" data-value="2"><i class="fa fa-star fa-fw"></i></li><li class="star" title="Good" data-value="3"><i class="fa fa-star fa-fw"></i></li><li class="star" title="Excellent" data-value="4"><i class="fa fa-star fa-fw"></i></li><li class="star" title="Perfect" data-value="5"><i class="fa fa-star fa-fw"></i></li></ul></div>' +
                    '<div class="success-box"><div class="clearfix"></div><div class="text-message"></div><div class="clearfix"></div></div></section>';

Это код jQuery, который создает функцию оценки 

  /* 1. Visualizing things on Hover - See next part for action on click */
            $('#stars li').on('mouseover', function() {
                var onStar = parseInt($(this).data('value'), 10); // The star currently mouse on

                // Now highlight all the stars that's not after the current hovered star
                $(this).parent().children('li.star').each(function(e) {
                    if (e < onStar) {
                        $(this).addClass('hover');
                    } else {
                        $(this).removeClass('hover');
                    }
                });

            }).on('mouseout', function() {
                $(this).parent().children('li.star').each(function(e) {
                    $(this).removeClass('hover');
                });
            });


            /* 2. Action to perform on click */
            $('#stars li').on('click', function() {
                var onStar = parseInt($(this).data('value'), 10); // The star currently selected
                var stars = $(this).parent().children('li.star');

                for (i = 0; i < stars.length; i++) {
                    $(stars[i]).removeClass('selected');
                }

                for (i = 0; i < onStar; i++) {
                    $(stars[i]).addClass('selected');
                }

                // JUST RESPONSE (Not needed)
                var ratingValue = parseInt($('#stars li.selected').last().data('value'), 10);
                var msg = "";
                if (ratingValue > 1) {
                    msg = "Thanks! You rated this " + ratingValue + " stars.";
                } else {
                    msg = "We will improve ourselves. You rated this " + ratingValue + " stars.";
                }
                responseMessage(msg);

            });

            function responseMessage(msg) {
                $('.success-box').fadeIn(200);
                $('.success-box div.text-message').html("<span>" + msg + "</span>");
            }

Это изображение показывает, как сообщение отображается на всех элементах введите описание изображения здесь

1 Ответ

1 голос
/ 29 апреля 2019

Вам нужно будет конкретизировать свой jQuery.Ваш $('#stars li') скорее всего слишком общий.Возможно, сгруппируйте элементы звездочки в отдельном divs так, чтобы на них можно было ссылаться более конкретно.Если ваш jQuery влияет на слишком много элементов, это просто означает, что ваши идентификаторы и / или ссылки на классы слишком общие.

...