Question

我想使用点击而不是悬停。我试过.on("click")。但它只是用于放置.rating_over而我无法删除该类。我想创建评级系统以使用javascript / jquery。我不需要使用font-awesome。

＆＃13;

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

＆＃13;

.ratings {
  overflow: visible;
  padding: 10px;
  position: relative;
  width: 100%;
  text-align: center;
}

.ratings_stars {
  background: url('https://maxcdn.icons8.com/Share/icon/Messaging//star1600.png') no-repeat;
  display: inline-block;
  height: 70px;
  padding: 2px;
  width: 7%;
  background-size: 100%;
}

.ratings_vote {
  background: url('') no-repeat;
}

.ratings_over {
  background: url('http://www.fancyicons.com/download/?id=3343&t=png&s=256') no-repeat;
  width: 7%;
  background-size: 100%;
}

.total_votes {
  background: #eaeaea;
  top: 58px;
  left: 0;
  padding: 5px;
  position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<input type="text">

＆＃13;

修改

//Rate and Review
$('.ratings_stars').on('mouseover',function(){
                $('.ratings_stars').on('mouseout',mouseout);
                $(this).addClass('ratings_over');
        $(this).prevAll('.ratings_stars').addClass('ratings_over');
});

        mouseout=function(){
             $(this).removeClass('ratings_over');
             $(this).prevAll('.ratings_stars').removeClass('ratings_over');
        };

$('.ratings_stars').on('mouseout',mouseout);

$('.ratings_stars').click(function(){
        $('.ratings_stars').off('mouseout');
  });

当我点击第10颗星时，所有的星星都会变成黄色，这是正确的行为。现在，当我点击第一颗星星时，其余星星都不会变黑，我需要通过onclick

来实现这一点。

Answer 1

你的小提琴告诉我什么是错的：方法和自己是未知的。您可以将JavaScript调整为以下内容：

var clicked=false;
var marked=0;

mouseout=function(){
        console.log(clicked+' '+marked)
        $(this).removeClass('ratings_over');
        $(this).prevAll('.ratings_stars').removeClass('ratings_over');
        if(clicked){
           $('.ratings_stars').slice(0,marked).addClass('ratings_over');
        }
};

mouseover=function(){
    $('.ratings_stars').on('mouseout',mouseout);
    $('.ratings_over').removeClass('ratings_over');

    $(this).addClass('ratings_over');
    $(this).prevAll('.ratings_stars').addClass('ratings_over');
};

$('.ratings_stars').on('mouseout',mouseout);
$('.ratings_stars').on('mouseover',mouseover);


$('.ratings_stars').click(function(){
        clicked=true;
        marked=$('.ratings_over').length;
  });

10星评级系统与JQuery

1 个答案: