javascript - 不要在悬停事件上更新多个 div

Question

我正在使用 html、css 和 js 编写一份简短的调查。我想提出一个问题，然后让用户按照 1-5 的等级进行评分。

理想情况下，我希望刻度能够响应，因此如果您将鼠标悬停在 1 上，它会变成黄色。如果将鼠标悬停在 2 上，则 1 和 2 都会变成黄色。如果将鼠标悬停在 3 上，前 3 个框会变成黄色。你明白了。

当调查中只有一个问题，但问题数量可能未知(而且很长)时，这种方法的工作原理非常简单。

我希望我可以使用相同的 JS 函数和 css 类，但是当我将鼠标悬停在页面上问题上的 1 上时，页面上的所有问题都会更新为黄色。最好的方法是什么，以便每个答案仅单独更新而不是整个页面？

这是当前的 HTML 代码:

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

还有 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");
    });
});

Answer 1

您可以将代码简化如下。

当您将鼠标悬停在某个元素上时，需要使用 this(指当前悬停的元素)引用来查找相关元素

$(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>