Question

当用户在圈子上盘旋时，该特定圈子及其左侧的圆圈应填充黄色，当用户点击圈子时，该特定圈子及其左侧的圆圈应填充绿色。< / p>

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

我已经为!important类提供了rating-hover，以便在用户再次悬停时为其提供优先级，现在问题是当用户第一次评级为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。然后，当.rating-hover事件触发时，您还需要删除click类。

最后，请注意您还可以将所有代码放在一个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

尝试将！important添加到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>

点击功能和悬停功能

2 个答案: