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

我遇到的问题是，当我单击所需的图像分级时，当我在单击所需分级后将鼠标悬停在较低分级的图像上时，我无法显示这些图像

例如，假设我单击了三星评级图像，我可以悬停并显示4星和5星评级图像，而无需单击它们，但当我在单击三星评级图像后悬停在它们上方时，我无法显示1星评级图像和2星评级图像

HTML

CSS

---

这里是代码运行的链接

这对您来说很好用

$（文档）.ready（函数（）{
var评级；
$（“.评级选择李”）
.on（'mouseenter touchstart'，函数（）{
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 pick'）.attr（“类”）.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（'更改单击'）功能（e）{
e、 预防默认值（）；
e、 停止传播（）；
$（'.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-'+类后缀）；
$（this）.off（'mouseenter touchstart mouseleave touchend'）；
});
});
*{
保证金：0；
填充：0；
边界：0；
}
#李国宝评级表{
列表样式：无；
宽度：100%；
浮动：左；
}
#评级表标签{
显示：内联块；
边缘底部：0.2米；
字体大小：粗体；
宽度：100%；
}
.费率{
浮动：左；
宽度：100%；
保证金：-1.4em 0 1.8em 0；
}
.评级选择{
宽度：150px；
高度：30px；
浮动：左；
边缘底部：1.8em；
}
.没有{
背景图像：url（'http://s8.postimg.org/xgfpw2679/stars.png');
背景重复：重复-x；
背景位置：0px 0px；
}
.1级{
背景图像：url（'http://s8.postimg.org/xgfpw2679/stars.png');
背景重复：重复-x；
背景位置：0px-60px；
}
.评级-2{
背景图像：url（'http://s8.postimg.org/xgfpw2679/stars.png');
背景重复：重复-x；
背景位置：0px-120px；
}
.评级-3{
背景图像：url（'http://s8.postimg.org/xgfpw2679/stars.png');
背景重复：重复-x；
背景位置：0px-180px；
}
.评级-4{
背景图像：url（'http://s8.postimg.org/xgfpw2679/stars.png');
背景重复：重复-x；
背景位置：0px-240px；
}
.评级-5{
背景图像：url（'http://s8.postimg.org/xgfpw2679/stars.png');
背景重复：重复-x；
背景位置：0px-300px；
}
.rating pick输入[type=“radio”]，.rating pick标签{
高度：0！重要；
显示：无！重要；
}
李先生{
浮动：左！重要；
宽度：30px！重要；
高度：30px！重要；
显示：块！重要；
列表样式类型：无！重要；
光标：指针！重要；
}




一颗星


双星


三星


四星


五星


给这个产品打分

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

$(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');
        });
    });


（和：D）
在小提琴中演奏得很好。你能告诉我你在哪里遇到问题吗？你只需要关闭mouseleave和touchend事件…查看我的回答当我单击评级时，它应该保持在该评级上，当我不是悬停在其他图像评级上，但当我悬停在图像评级上时，应该显示图像评级。
$(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');
    });
}); 

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

$(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');
        });
    });