javascript - 添加评级并删除 onClick

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