Question

我遇到的问题是当我点击所需的图像评级时，当我点击所需的评级后，当我将鼠标悬停在它们上面时，我无法显示较低的评级图像。

例如，假设我点击了3星评级图片，我可以悬停并显示4星和5星评级图片而不点击它们但是当我将鼠标悬停在它们上面时，我无法显示图像星级1和2点击3星评级图片后。

HTML

<form method="post" 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>
                <div class="rate" data-desc="Rate this product">Rate this product</div>
            </li>
        </ol>
    </fieldset>
</form>

Jquery的

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

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;
}

以下是操作代码http://jsfiddle.net/pt20141d/1/

的链接

Answer 1

我添加了一个变量，这是您生成的代码：

$(document).ready(function() {
  var rating;
      $('.rating-pick li')
        .on('mouseenter touchstart', function() {
          var classSuffix = $(this).find('input').attr('id').split('-')[1];
          $('.rating-pick').prevAll().addBack().addClass('rating-' + classSuffix);
          $('.rating-pick').nextAll().removeClass('notrated');
          $('.rate').text($(this).data('desc'));


        rating = $('.rating-pick').attr("class").split(" ")[1];
        $('.rating-pick').removeClass(rating);
        })
        .on('mouseleave touchend', function() {
          var classSuffix = $(this).find('input').attr('id').split('-')[1];
          $('.rating-pick').prevAll().addBack().removeClass('rating-' + classSuffix);
          $('.rate').text($('.rate').attr('data-desc'));

        $('.rating-pick').addClass(rating);
        })
        .on('change click', function(e) {
          e.preventDefault();
          e.stopPropagation();
          $('.rate').attr('data-desc', $(this).attr('data-desc'));
          var classSuffix = $(this).find('input').attr('id').split('-')[1];
          $('ul.rating-pick').removeClass().addClass('rating-pick rating-' + classSuffix);
          $(this).off('mouseenter touchstart mouseleave touchend');
        });
    });

Here is the JSFiddle demo

（和this one is for fun：D）

Answer 2

这对你来说很好。

＆＃13;

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

＆＃13;

*{
  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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<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>
                <div class="rate" data-desc="Rate this product">Rate this product</div>
            </li>
        </ol>
    </fieldset>
</form>

＆＃13;

单击图像时Jquery悬停图像故障

2 个答案: