javascript - 我的 jQuery 不工作 - 我正在尝试将 CSS 插入到附加了类的元素中

Question

我正在尝试将 CSS 插入到附加了一个类的元素中，这样我基本上会将元素的颜色替换为列表中的颜色。

它不工作。

这是代码：

<script type="text/javascript">
jQuery(document).ready( function() {    
    var i = 0,
    colors = ['green', 'red', 'orange', 'brown', 'purple'];
    function setColor() {
     jQuery('.fc-event-skin').each.eq(i).css('background-color', colors[i  % colors.length]);
          i++;
        if (i == 4) {
            i = 0;
        }
    }})
</script>

我重写了这个，仍然没有工作：

jQuery(document).ready( function() {    
var i = 0,
    colors = ['green', 'red', 'orange', 'brown', 'purple'];

     jQuery('.fc-event-skin').each(function(i) {
         (this).css('background-color', colors[i  % colors.length]);
          i++;
    if (i == 4) {
        i = 0;
    }
     })

Answer 1

你each()做错了。

$('.fc-event-skin').each(function(i, elem) {
    $(this).css('background-color', colors[i % colors.length]);
});

Answer 2

jQuery.each()已经增加了i你不需要这样做。这应该有效：

jQuery(document).ready(function() {    
   var colors = ['green', 'red', 'orange', 'brown', 'purple'];

   jQuery('.fc-event-skin').each(function(i) {
       jQuery(this).css('background-color', colors[i]);
   });
});

Answer 3

如果有任何学习目的，这里有一个更简单的方法来实现这一点：

jQuery(document).ready( function() {    
    var colors = ['green', 'red', 'orange', 'brown', 'purple'];
    jQuery('.fc-event-skin').css("background-color",function(i) {
         return colors[i % colors.length];
    });
});