Dont Update Multiple Divs On Hover Events

Im writing a short survey using html, css & js. I want to ask a question, and then let the user rate on a scale of 1-5. Ideally I wanted the scale to be responsive, so if you

Solution 1:

You can simplify the code as below.

When you hover over an element, you need to find the related element by using the this(which refers to the currently hovering element) reference

$(function() {
  var scaletext = {
    1: 'SA',
    2: 'A',
    3: 'N',
    4: 'Da',
    5: 'SDa'
  }
  $('.scale').hover(function() {
    var $this = $(this);
    $this.prevAll('.scale').addBack().css('background-color', 'yellow');
    $this.siblings('.scale-text').html(scaletext[$this.data('scale')]);
  }, function() {
    var $this = $(this);
    $this.prevAll('.scale').addBack().css('background-color', '');
    $this.siblings('.scale-text').html("No Rating");
  });
});

td > div.scale {
  padding: 5px;
  background-color: lightgrey;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>Overall</td>
      <td></td>
      <td></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Question 1</td>
      <td width="300px">
        <div class="scale-text">No Rating</div>
        <div data-scale="1" class="scale scale-1"></div>
        <div data-scale="2" class="scale scale-2"></div>
        <div data-scale="3" class="scale scale-3"></div>
        <div data-scale="4" class="scale scale-4"></div>
        <div data-scale="5" class="scale scale-5"></div>
      </td>
      <td>Comment</td>
    </tr>
    <tr>
      <td>Question 1</td>
      <td width="300px">
        <div class="scale-text">No Rating</div>
        <div data-scale="1" class="scale scale-1"></div>
        <div data-scale="2" class="scale scale-2"></div>
        <div data-scale="3" class="scale scale-3"></div>
        <div data-scale="4" class="scale scale-4"></div>
        <div data-scale="5" class="scale scale-5"></div>
      </td>
      <td>Comment</td>
    </tr>
    <tr>
      <td>Question 1</td>
      <td width="300px">
        <div class="scale-text">No Rating</div>
        <div data-scale="1" class="scale scale-1"></div>
        <div data-scale="2" class="scale scale-2"></div>
        <div data-scale="3" class="scale scale-3"></div>
        <div data-scale="4" class="scale scale-4"></div>
        <div data-scale="5" class="scale scale-5"></div>
      </td>
      <td>Comment</td>
    </tr>
    <tr>
      <td>Question 1</td>
      <td width="300px">
        <div class="scale-text">No Rating</div>
        <div data-scale="1" class="scale scale-1"></div>
        <div data-scale="2" class="scale scale-2"></div>
        <div data-scale="3" class="scale scale-3"></div>
        <div data-scale="4" class="scale scale-4"></div>
        <div data-scale="5" class="scale scale-5"></div>
      </td>
      <td>Comment</td>
    </tr>
  </tbody>
  <table>

Solution 2:

You can select all previous element of a div in jQuery.

Here's your solution:

var frases = ["Strongly Disagree", "Disagree", "Neutral", "Agree", "Strongly agree"];
$('.scale').hover(function() {
  $(this).prevAll('.scale').css('background-color', 'yellow').end().css('background-color', 'yellow');
  $(this).prevAll('.scale-text').html(frases[$(this).data('value')-1]);
}, function() {
  // on mouseout, reset the background colour
  $(this).prevAll('.scale').css('background-color', '').end().css('background-color', '');
  $(this).prevAll('.scale-text').html("No Rating");
});

https://jsfiddle.net/qpw7wof1/1/

Solution 3:

Just add a single css class like scale to all rating elements and do the following:

$(function() {
  $('.scale').hover(function() {
    var $previous = $(this);
    while ($previous.length && $previous.hasClass('scale')) {
      $previous.css('background-color', 'yellow');
      $previous = $previous.prev();
    }
  }, function() {
    var $previous = $(this);
    while ($previous.length && $previous.hasClass('scale')) {
      $previous.css('background-color', '');
      $previous = $previous.prev();
    }
  })
});

Working Fiddle