Question

每当我选择一个评级然后将其清除并悬停在评级上时，我刚刚清除的上一个评级再次显示，就像我再次选择它一样。我怎么能阻止这种情况发生。例如，假设我点击3星评级，然后点击清除，然后我将鼠标悬停在5星评级上并将鼠标从评级中移开，当我选择它时，将突出显示3星评级。我怎么能阻止这一点。

以下是JsFiddle https://jsfiddle.net/a2t0syzh/

的链接

HTML

<form method="" action="" id="rating-form">
  <fieldset>
    <ol>
      <li>
        <ul class="rating-pick notrated">
          <li id="rate-1" data-desc="Bad">
            <label for="rating-1">
              <input type="radio" value="1" name="rating" id="rating-1" />1 star</label>
          </li>
          <li id="rate-2" data-desc="Good">
            <label for="rating-2">
              <input type="radio" value="2" name="rating" id="rating-2" />2 stars</label>
          </li>
          <li id="rate-3" data-desc="Great">
            <label for="rating-3">
              <input type="radio" value="3" name="rating" id="rating-3" />3 stars</label>
          </li>
          <li id="rate-4" data-desc="Better">
            <label for="rating-4">
              <input type="radio" value="4" name="rating" id="rating-4" />4 stars</label>
          </li>
          <li id="rate-5" data-desc="Best">
            <label for="rating-5">
              <input type="radio" value="5" name="rating" id="rating-5" />5 stars</label>
          </li>
        </ul>
        <a class="clear" title="" href="#">Clear</a>
        <div class="rate" data-desc="Rate this product">Rate this product</div>
      </li>
    </ol>
  </fieldset>
</form>

Jquery的

$(document).ready(function(){
    var rating = 'notrated';
    $('.rating-pick li')
        .on('mouseenter touchstart', function(){
            $(this).parent().removeClass($(this).parent().attr('class').split(' ')[1]);
            var classSuffix = $(this).attr('id').split('-')[1];
            $('.rating-pick').addClass('rating-' + classSuffix);
            $('.rate').text($(this).data('desc'));
        })
        .on('mouseleave touchend', function(){
            var classSuffix = $(this).attr('id').split('-')[1];
            $('.rate').text($('.rate').attr('data-desc'));
            $('.rating-pick').attr('class', '').addClass('rating-pick ' + rating)
        })
        .on('change click', function(e){
            e.preventDefault();
            e.stopPropagation();
            $('.rate').attr('data-desc', $(this).attr('data-desc'));
            rating = 'rating-' + $(this).attr('id').split('-')[1];
            $('.rating-pick').removeClass('notrated').addClass(rating);
            $(this).find('input').prop('checked', true);
        });
});

$(document).ready(function(){
    $('.clear').on('change click', function(e){
        e.preventDefault();
        e.stopPropagation();
        $('#rating-form').find('input:checked').prop('checked', false);
        $('#rating-form').find('ul').removeClass().addClass('rating-pick notrated');
    });
});

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
}

#rating-form ol li {
  list-style: none;
  width: 100%;
  float: left;
}

#rating-form label {
  display: inline-block;
  margin-bottom: 0.2em;
  font-weight: bold;
  width: 100%;
}

.rate {
  float: left;
  width: 100%;
  margin: -1.4em 0 1.8em 0;
}

.rating-pick {
  width: 150px;
  height: 30px;
  float: left;
  margin-bottom: 1.8em;
}

.notrated {
  background-image: url('http://s8.postimg.org/xgfpw2679/stars.png');
  background-repeat: repeat-x;
  background-position: 0px 0px;
}

.rating-1 {
  background-image: url('http://s8.postimg.org/xgfpw2679/stars.png');
  background-repeat: repeat-x;
  background-position: 0px -60px;
}

.rating-2 {
  background-image: url('http://s8.postimg.org/xgfpw2679/stars.png');
  background-repeat: repeat-x;
  background-position: 0px -120px;
}

.rating-3 {
  background-image: url('http://s8.postimg.org/xgfpw2679/stars.png');
  background-repeat: repeat-x;
  background-position: 0px -180px;
}

.rating-4 {
  background-image: url('http://s8.postimg.org/xgfpw2679/stars.png');
  background-repeat: repeat-x;
  background-position: 0px -240px;
}

.rating-5 {
  background-image: url('http://s8.postimg.org/xgfpw2679/stars.png');
  background-repeat: repeat-x;
  background-position: 0px -300px;
}

.rating-pick input[type="radio"],
.rating-pick label {
  height: 0 !important;
  display: none !important;
}

.rating-pick li {
  float: left !important;
  width: 30px !important;
  height: 30px !important;
  display: block !important;
  list-style-type: none !important;
  cursor: pointer !important;
}

.clear{
    display: inline-block;
}

Answer 1

您正在使用以下行来设置评级：

$('.rating-pick').attr('class', '').addClass('rating-pick ' + rating)

请注意rating变量是在此$(document).ready处理程序中定义的，并且在您点击clear时不会重置。因此，当鼠标离开ul时，它会将评级重置为rating变量中存储的内容。

只需进行以下更改：

var rating = 'notrated'; //move rating out of other functions

$(document).ready(function(){
    $('.rating-pick li')

然后在点击清除时将评级重置为“已评论”：

$('.clear').on('change click', function(e){
    e.preventDefault();
    e.stopPropagation();
    $('#rating-form').find('input:checked').prop('checked', false);
    $('#rating-form').find('ul').removeClass().addClass('rating-pick notrated');
   rating='notrated';
});

您fiddle已更新。

Jquery删除了css类名称问题

1 个答案: