点击功能和悬停功能

Question

当用户将鼠标悬停在圆圈上时，该特定圆圈及其左侧的圆圈应填充黄色，当用户单击某个圆圈时，该特定圆圈及其左侧的圆圈应填充绿色。

当用户再次悬停时，最后一个活动的圆圈应该回滚到悬停效果功能，并用黄色填充，如果用户不喜欢再次单击，则必须保留以前用绿色填充的圆圈。

我已经给了rating-hover类的!important，当用户再次悬停时，给它一个优先级，现在的问题是，当用户第一次评级为4，再次考虑评级2之后，并在第二个圆圈上悬停，之前填充的4星仍然可以看到，我不想看到，用户必须感觉到新的评级，当他再次悬停时，如果不点击，必须保留以前点击的星。另外，我不喜欢使用!important；欢迎任何其他的解决方案！

​

$(function() {
  $('.rating-circle').hover(function() {
      $(this).prevAll().addBack().addClass('rating-hover');
    },
    function() {
      $(this).prevAll().addBack().removeClass('rating-hover');
    });
});

$(function() {
  $('.rating-circle').click(function() {
    $('.rating-circle').removeClass('rating-chosen');
    $(this).prevAll().addBack().addClass('rating-chosen');
  });
});

.rating-circle {
  height: 2em;
  width: 2em;
  border: .1em solid black;
  border-radius: 1.1em;
  display: inline-block;
  margin: 0;
  padding: .1em;
}
.rating-hover {
  background-color: yellow !important;
}
.rating-chosen {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rating-container">
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
</div>

​

Answer 1

要达到所需的效果，只需将.rating-hover类设置为比.rating-chosen更具体，以便覆盖它。为此，我在其前面添加了一个元素选择器，特别是div。然后，您还需要在触发click事件时删除.rating-hover类。

最后，请注意，您还可以将所有代码放在单个document.ready处理程序中。试试这个：

​

$(function() {
  $('.rating-circle').hover(function() {
    $(this).prevAll().addBack().addClass('rating-hover');
  }, function() {
    $(this).prevAll().addBack().removeClass('rating-hover');
  });

  $('.rating-circle').click(function() {
    $('.rating-circle').removeClass('rating-chosen rating-hover');
    $(this).prevAll().addBack().addClass('rating-chosen');
  });
});

.rating-circle {
  height: 2em;
  width: 2em;
  border: .1em solid black;
  border-radius: 1.1em;
  display: inline-block;
  margin: 0;
  padding: .1em;
}
div.rating-hover {
  background-color: yellow;
}
.rating-chosen {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rating-container">
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
</div>

​

Answer 2

尝试向rating-hover类添加!important。悬停按钮工作正常，但由于在您的风格中最后选择了评级，因此您需要在此处添加！重要标记。

​

$(function() {
  $('.rating-circle').hover(function() {
      $(this).prevAll().addBack().addClass('rating-hover');
    },
    function() {
      $(this).prevAll().addBack().removeClass('rating-hover');
    });
});

$(function() {
  $('.rating-circle').click(function() {
    $('.rating-circle').removeClass('rating-chosen');
    $(this).prevAll().addBack().addClass('rating-chosen');
  });
});

.rating-circle {
  height: 2em;
  width: 2em;
  border: .1em solid black;
  border-radius: 1.1em;
  display: inline-block;
  margin: 0;
  padding: .1em;
}
.rating-hover {
  background-color: yellow !important;
}
.rating-chosen {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rating-container">
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
</div>

​