title: Why is my if statement only work when my input has a value?
body: <p>I am building a five star rating system with jQuery.  The script creates five star icons.  When you hover over one of them, all stars before and including the star that's hovered over are highlighted.  When you click a star, the value of the hidden input the script created is changed to the number of that star and that star along with the stars before it remain highlighted until a different star is clicked.  When the user's mouse leaves the parent of the stars, if a star was previously selected(based on the value of the hidden input) those stars remain highlighted.  If no star was previously selected when the user's mouse leaves the parent, all stars return to empty... or they should.</p>
  
  <p>Currently, the stars return back to the selection when the mouse leaves the parent, which is what I want.  The problem is that if a value wasn't selected(star wasn't clicked), the stars don't go back to empty.  What's wrong with the if statement in the mouseleave method of the parent?  Here is a <a href="https://jsfiddle.net/ShoeLace1291/9mLzLsw7/3/" rel="nofollow">jsFiddle</a>.  I have left the input as a text input so you can see the values changing.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="rating" style="float: none;clear: both;"&gt;
    &lt;noscript&gt;
      &lt;label class="radio-inline"&gt;
        &lt;input type="radio" name="stars" value="1" title="1 Star"&gt; 1
      &lt;/label&gt;
      &lt;label class="radio-inline"&gt;
        &lt;input type="radio" name="stars" value="2" title="2 Stars"&gt; 2
      &lt;/label&gt;
      &lt;label class="radio-inline"&gt;
        &lt;input type="radio" name="stars" value="3" title="3 Stars"&gt; 3
      &lt;/label&gt;
      &lt;label class="radio-inline"&gt;
        &lt;input type="radio" name="stars" value="4" title="4 Stars"&gt; 4
      &lt;/label&gt;
      &lt;label class="radio-inline"&gt;
        &lt;input type="radio" name="stars" value="5" title="5 Stars"&gt; 5
      &lt;/label&gt;
    &lt;/noscript&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$element = $('.rating');
  $element.each(function() {
    $element.empty();
    var hiddenInput = $('&lt;input type="text" name="stars" id="selectedStars"&gt;');
    $element.append(hiddenInput);
    $selectedStars = $('#selectedStars').val();
    for (var i = 0; i &lt; 5; i++) {
      var occurrence = i + 1;
      var newStar = $('&lt;i class="fa fa-star-o" title="' + occurrence + ' stars" data-occurrence="' + occurrence + '"&gt;&lt;/i&gt;');
      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');
      }
    });
  });
  </code></pre>