不要在悬停事件上更新多个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>

和联合来文：

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

​

Answer 2

您可以在jQuery中选择div的所有先前元素。

以下是您的解决方案：

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/

Answer 3

只需向所有评级元素添加一个类似于scale的css类，然后执行以下操作：

$(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();
    }
  })
});

工频