prevAlll（）中每个div的不同css背景

Question

继续我原来（现在回答）的问题： Dont update multiple divs on hover events

JS：

Gmponos.MyHelper

HTML

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

  

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

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;