javascript - prevAlll() 中每个 div 的不同 css 背景

Question

继我最初(现已回答)的问题之后: Dont update multiple divs on hover events

JS:

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

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

目前，每个 div 在悬停时都会获得黄色背景。如何让比例尺中的每个 div 在悬停时具有不同的背景颜色？

Answer 1

尝试创建一个包含要应用的颜色的数组，使用 .each() 设置每个 .scale 元素的 background

$(function() {
 var scaletext = {
  1: 'SA',
  2: 'A',
  3: 'N',
  4: 'Da',
  5: 'SDa'
};
  
var colors = ["red", "darkorange", "orange", "yellow", "green"];
  
$('.scale').hover(function() {
  var $this = $(this);
  $this.prevAll('.scale').addBack().each(function(i) {
    $(this).css("background", colors[i])
  })
  $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/1.11.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>