Javascript 为什么我的if语句只有在输入有值时才起作用？

我正在用jQuery建立一个五星评级系统。该脚本创建五星图标。当您将鼠标悬停在其中一颗星星上时，之前的所有星星（包括悬停在上面的星星）都将亮显。单击星号时，脚本创建的隐藏输入的值将更改为该星号和该星号以及星号的编号，然后该星号将保持高亮显示，直到单击其他星号为止。当用户的鼠标离开星星的父对象时，如果先前选择了星星（基于隐藏输入的值），则这些星星将保持高亮显示。如果当用户的鼠标离开父对象时，之前没有选择星号，则所有星号将返回空。。。或者他们应该这样做

当前，当鼠标离开父对象时，星星将返回到所选内容，这正是我想要的。问题是，如果没有选择某个值（没有单击星号），星号不会返回为空。父对象的mouseleave方法中的if语句有什么问题？这是一本书。我将输入保留为文本输入，以便您可以看到值的变化

HTML:

1.
2.
3.
4.
5.

jQuery：

$element = $('.rating');
$element.each(function() {
  $element.empty();
  var hiddenInput = $('<input type="text" name="stars" id="selectedStars">');
  $element.append(hiddenInput);
  $selectedStars = $('#selectedStars').val();
  for (var i = 0; i < 5; i++) {
    var occurrence = i + 1;
    var newStar = $('<i class="fa fa-star-o" title="' + occurrence + ' stars" data-occurrence="' + occurrence + '"></i>');
    newStar.on('click', function() {
      $('#selectedStars').attr('value', $(this).data('occurrence'));
      $(this).prevAll().andSelf().removeClass('fa-star-o').addClass('fa-star');
      $(this).nextAll().removeClass('fa-star').addClass('fa-star-o');
      $element.data('selected', $(this).data('occurrence'));
      console.log($selectedStars);
    }).on('mouseover', function() {
      $(this).prevAll().andSelf().removeClass('fa-star-o').addClass('fa-star');
      $(this).nextAll().removeClass('fa-star').addClass('fa-star-o');
    });;
    $element.append(newStar);
  }
  $(this).mouseleave(function() {
    $selectedStars = $('#selectedStars').attr('value');
    if ($selectedStars != '') {
      $('i[data-occurrence="' + $selectedStars + '"]').prevAll().andSelf().removeClass('fa-star-o').addClass('fa-star');
      $('i[data-occurrence="' + $selectedStars + '"]').nextAll().removeClass('fa-star').addClass('fa-star-o');
      console.log($selectedStars);
    } else {
      //This should return all stars to empty if no value was set.
      $('i[class*="fa-star"]').removeClass('fa-star').addClass('fa-star-o');
    }
  });
});

$element=$（'.rating'）；
$element.each（函数（）{
$element.empty（）；
变量hiddenInput=$（''）；
$element.append（hiddenInput）；
$selectedStars=$（'#selectedStars'）.val（）；
对于（变量i=0；i<5；i++）{
var发生率=i+1；
var newStar=$（''）；
newStar.on（'click'，function（））{
$（'#selectedStars'）.attr（'value'，$（this.data（'occurrence'））；
$（this）.prevAll（）.andSelf（）.removeClass（'fa-star-o'）.addClass（'fa-star'）；
$（this）.nextAll（）.removeClass（'fa-star'）.addClass（'fa-star-o'）；
$element.data（'selected'，$（this.data（'occurrence'））；
console.log（$selectedStars）；
}).on（'mouseover'，function（）{
$（this）.prevAll（）.andSelf（）.removeClass（'fa-star-o'）.addClass（'fa-star'）；
$（this）.nextAll（）.removeClass（'fa-star'）.addClass（'fa-star-o'）；
});;
$element.append（newStar）；
}
$（this.mouseleave（function（））{
$selectedStars=$（'#selectedStars'）.attr（'value'）；
如果（$selectedStars！=''）{
$（'i[data occurrence=“'+$selectedStars+'”）.prevAll（）.andSelf（）.removeClass（'fa-star-o'）.addClass（'fa-star'）；
$（'i[data occurrence=“'+$selectedStars+'”）.nextAll（）.removeClass（'fa-star'）.addClass（'fa-star-o'）；
console.log（$selectedStars）；
}否则{
//如果未设置任何值，则应将所有星号返回为空。
$（'i[class*='fa-star']）。removeClass（'fa-star'）。addClass（'fa-star-o'）；
}
});
});

如果未选择任何内容，

$selectedStars

是

未定义的
，而不是
'
。如果你改变

if ($selectedStars != '') {

到

它按预期工作

if ($selectedStars != '') {

if ($selectedStars)