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

继我原来的（现在回答的）问题之后： 不要在hover事件上更新多个div

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

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







 
	

		      	
 尝试使用.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; } 
  
 
 
 
Overall
 
 
 
 
 
 
 
Question 1
 
 
No Rating
 
 
 
 
 
 
 
Comment
 
 
 
Question 1
 
 
No Rating
 
 
 
 
 
 
 
Comment
 
 
 
Question 1
 
 
No Rating
 
 
 
 
 
 
 
Comment
 
 
 
Question 1
 
 
No Rating
 
 
 
 
 
 
 
Comment
 
 



	
 
 
 
Overall
 
 
 
 
 
 
 
Question 1
 
 
No Rating
 
 
 
 
 
 
 
Comment
 
 
 
Question 1
 
 
No Rating
 
 
 
 
 
 
 
Comment
 
 
 
Question 1
 
 
No Rating
 
 
 
 
 
 
 
Comment
 
 
 
Question 1
 
 
No Rating
 
 
 
 
 
 
 
Comment