javascript - 使用相同功能时，Mouseleave 会覆盖点击

Question

我正在尝试用 javascript 制作评级系统。

我想在 click 和 mouseenter 上执行相同的功能，但在 mouseleave 上执行相反的功能，因为 mouseleave 会覆盖 clicks 功能。

看看我想说什么。这是我的代码

$(document).ready(function() {
  $(".rate_btn").on({
    click: function(eve) {
      $(this).prevAll().andSelf().addClass("rate_btn_active");
      var current_rating = $(this).attr('id');
      $("#current_given_rating").html(current_rating);
      $("#check_click").html("See its working: " + current_rating);
      $("#msg").html("But because of mouseleave its not retaining.");
    },
    mouseenter: function() {
      $(this).prevAll().andSelf().addClass("rate_btn_active");
      var current_rating = $(this).attr('id');
      $("#current_given_rating").html(current_rating);
    },
    mouseleave: function() {
      $(this).prevAll().andSelf().removeClass("rate_btn_active");
      $("#current_given_rating").html("");
    }
  });
});

.rate_btn {
  width: 25px;
  height: 25px;
  margin: 5px 1px;
  border-radius: 5px;
  display: inline-block;
  background-color: #D8D8D8;
}
.rate_btn_active {
  background-color: #11AB0E;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="check_click"></div>
<div id="msg"></div>
<div>
  <div id="1" class="rate_btn"></div>
  <div id="2" class="rate_btn"></div>
  <div id="3" class="rate_btn"></div>
  <div id="4" class="rate_btn"></div>
  <div id="5" class="rate_btn"></div>
  <div id="current_given_rating" style="margin: 10px"></div>
</div>

Answer 1

这与您的代码类似。我们将使用“事件”类来动态显示所有框，包括鼠标所在的当前框。但是当我们实际点击时，我们将添加一个永久的“选定”类，即使在 mouseleave 删除“事件”类之后该类也会持续存在。

$(document).ready(function() {
  $(".rate_btn").on({
    click: function(eve) {
      $('.selected').removeClass('selected');
      $(this).prevAll().andSelf().addClass('selected');
      var current_rating = $(this).attr('id');
      $("#current_given_rating").html(current_rating);
    },
    mouseenter: function() {
      $(this).prevAll().andSelf().addClass("rate_btn_active");
      var current_rating = $(this).attr('id');
      $("#current_given_rating").html(current_rating);
    },
    mouseleave: function() {
      $(this).prevAll().andSelf().removeClass("rate_btn_active");
      $("#current_given_rating").html("");
    }
  });
});

.rate_btn {
  width: 30px;
  height: 25px;
  float:left;
}
.rate_btn div{
  background-color: #D8D8D8;
  border-radius: 5px;
  width: 25px;
  height: 25px;
}

#ratingbox:hover .selected div{background-color: #D8D8D8;}

#ratingbox:hover .r1.rate_btn_active div{background-color: rgb(220,30,30)!important;}
#ratingbox:hover .r2.rate_btn_active div{background-color: rgb(200,50,30)!important;}
#ratingbox:hover .r3.rate_btn_active div{background-color: rgb(200,200,30)!important;}
#ratingbox:hover .r4.rate_btn_active div{background-color: rgb(50 ,200,30)!important;}
#ratingbox:hover .r5.rate_btn_active div{background-color: rgb(30 ,220,30)!important;}

.r1.selected div, .r1.rate_btn_active div { background-color: rgb(220,30,30);}
.r2.selected div, .r2.rate_btn_active div { background-color: rgb(200,50,30);}
.r3.selected div, .r3.rate_btn_active div { background-color: rgb(200,200,30);}
.r4.selected div, .r4.rate_btn_active div { background-color: rgb(50 ,200,30);}
.r5.selected div, .r5.rate_btn_active div { background-color: rgb(30 ,220,30);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="check_click"></div>
<div id="msg"></div>
<div id="ratingbox">
  <div id="1" class="rate_btn r1"><div></div></div>
  <div id="2" class="rate_btn r2"><div></div></div>
  <div id="3" class="rate_btn r3"><div></div></div>
  <div id="4" class="rate_btn r4"><div></div></div>
  <div id="5" class="rate_btn r5"><div></div></div>
  <div style="clear:both"></div>
</div>
<div id="current_given_rating" style="margin: 10px"></div>