Question

<div class="row">
  <div class="col-xs-12 no-padding">
         <div id="rating" class="ratings no-padding">
             <div class="star_1 ratings_stars"></div>
             <div class="star_2 ratings_stars"></div>
             <div class="star_3 ratings_stars"></div>
             <div class="star_4 ratings_stars"></div>
             <div class="star_5 ratings_stars"></div>
             <div class="star_6 ratings_stars"></div>
             <div class="star_7 ratings_stars"></div>
             <div class="star_8 ratings_stars"></div>
             <div class="star_9 ratings_stars"></div>
             <div class="star_10 ratings_stars"></div>
        </div>
   </div>
 </div>

$('.ratings_stars').hover(

            // Handles the mouseover

            function () {

                $(this).prevAll().andSelf().addClass('ratings_over');


            },

            // Handles the mouseout

            function () {

                $(this).prevAll().andSelf().removeClass('ratings_over');

            }

        );

这是我的代码..问题是我需要代码才能在onClick上工作，而不是悬停。我正试图在点击时更改评级星。悬停工作正常，但这不是我需要的。我能做什么？有什么想法吗？

Answer 1

您可以使用here

中描述的on（）函数

代码将变成类似的东西：

$('.ratings_stars').on('click',
            function () {
                $(this).prevAll().andSelf().addClass('ratings_over');
            }
        );

我已经创建了一个可以帮助您的代码笔：https://codepen.io/anon/pen/ZeZqmY

添加评级并删除onClick

1 个答案: