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 hover over 1 it turns yellow. If you hover of 2, it turns both 1 and 2 yellow. If you hover over 3, it turns the first 3 boxes yellow. You get the idea.

This works pretty simply when there is only one question in the survey, but the amount of questions is likely to be unknown (and lengthy).

I was hoping I could just use the same JS function and css classes but when I hover over a 1 on a question on the page ALL the questions on the page update to be yellow. What's the best way of doing this so that each answer will only update individually and not the entire page?

Heres current HTML code:

            <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 class="scale-1"></div>
                        <div class="scale-2"></div>
                        <div class="scale-3"></div>
                        <div class="scale-4"></div>
                        <div class="scale-5"></div>
                    </td>
                    <td>Comment</td>
                </tr>
                <tr>
                    <td>Question 2</td>
                    <td width="300px">
                        <div class="scale-text"></div>
                        <div class="scale-1"></div>
                        <div class="scale-2"></div>
                        <div class="scale-3"></div>
                        <div class="scale-4"></div>
                        <div class="scale-5"></div>
                    </td>
                    <td>Comment</td>
                </tr>                   
            </tbody>
        <table>

And JS:

<script>
$(function() {
    $('.scale-1').hover(function() {
        $('.scale-1').css('background-color', 'yellow');
        $('.scale-text').html("Strongly Disagree");
    }, function() {
        // on mouseout, reset the background colour
        $('.scale-1').css('background-color', '');
        $('.scale-text').html("No Rating");
    });
});

$(function() {
    $('.scale-2').hover(function() {
        $('.scale-1').css('background-color', 'yellow');
        $('.scale-2').css('background-color', 'yellow');
        $('.scale-text').html("Disagree");
    }, function() {
        // on mouseout, reset the background colour
        $('.scale-1').css('background-color', '');
        $('.scale-2').css('background-color', '');
        $('.scale-text').html("No Rating");
    });
});

$(function() {
    $('.scale-3').hover(function() {
        $('.scale-1').css('background-color', 'yellow');
        $('.scale-2').css('background-color', 'yellow');
        $('.scale-3').css('background-color', 'yellow');
        $('.scale-text').html("Neutral");
    }, function() {
        // on mouseout, reset the background colour
        $('.scale-1').css('background-color', '');
        $('.scale-2').css('background-color', '');
        $('.scale-3').css('background-color', '');
        $('.scale-text').html("No Rating");
    });
});

$(function() {
    $('.scale-4').hover(function() {
        $('.scale-1').css('background-color', 'yellow');
        $('.scale-2').css('background-color', 'yellow');
        $('.scale-3').css('background-color', 'yellow');
        $('.scale-4').css('background-color', 'yellow');
        $('.scale-text').html("Agree");
    }, function() {
        // on mouseout, reset the background colour
        $('.scale-1').css('background-color', '');
        $('.scale-2').css('background-color', '');
        $('.scale-3').css('background-color', '');
        $('.scale-4').css('background-color', '');
        $('.scale-text').html("No Rating");
    });
});

$(function() {
    $('.scale-5').hover(function() {
        $('.scale-1').css('background-color', 'yellow');
        $('.scale-2').css('background-color', 'yellow');
        $('.scale-3').css('background-color', 'yellow');
        $('.scale-4').css('background-color', 'yellow');
        $('.scale-5').css('background-color', 'yellow');
        $('.scale-text').html("Strongly Agree");
    }, function() {
        // on mouseout, reset the background colour
        $('.scale-1').css('background-color', '');
        $('.scale-2').css('background-color', '');
        $('.scale-3').css('background-color', '');
        $('.scale-4').css('background-color', '');
        $('.scale-5').css('background-color', '');
        $('.scale-text').html("No Rating");
    });
});

回答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>

回答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/

回答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