0

我正在使用.find()来识别重复元素并为它们中的每一个赋予不同的背景颜色。我想要的是：

  1. 手动创建颜色数组（颜色数组）（#EF4128、#BA1028、#2C4534 等）
  2. 找到所有带有“widget-title”类的h3并将它们放入一个数组（元素数组）
  3. 通过匹配两个数组，为每个项目赋予不同的颜色。

对于这里的许多人来说，这应该是一项简单的工作。但是我做了以下事情，因为我不熟悉 while 循环和事情。谁能告诉我怎么做这个又短又甜？

<script type="text/javascript">
jQuery(document).ready(function(){        
var item1 = jQuery('h3.widget-title')[0];
var item2 = jQuery('h3.widget-title')[1];
var item3 = jQuery('h3.widget-title')[2];
var item4 = jQuery('h3.widget-title')[3];
var item5 = jQuery('h3.widget-title')[4];
var item6 = jQuery('h3.widget-title')[5];
var item7 = jQuery('h3.widget-title')[6];

jQuery('aside').find( item1 ).css('background-color', '#5938A2');
jQuery('aside').find( item2 ).css('background-color', '#BE8A45');
jQuery('aside').find( item3 ).css('background-color', '#B6AE18');
jQuery('aside').find( item4 ).css('background-color', '#864D75');
jQuery('aside').find( item5 ).css('background-color', '#2C4534');
jQuery('aside').find( item6 ).css('background-color', '#BA1028');
jQuery('aside').find( item7 ).css('background-color', '#EF4128');
});
</script>
4

1 回答 1

2

我会像这样减少你的代码

$(function(){        
    var colours = ['#5938A2', '#BE8A45', '#B6AE18', '#864D75', '#2C4534', 
                   '#BA1028', '#EF4128'];

    $('aside h3.widget-title').each(function(i) {
        $(this).css('background-color', colours[i] || "#000");
        /* if you have more elements than colours defined, use 
         * a default colour - e.g. #000
         */
    });
});

当前元素的索引在each()方法内部传递，用于简单的数组查找

如果所有这些标题都是同级的，则可以实现涉及更多 CSS 和现代浏览器的不同解决方案，定义几个 CSS 规则，如下所示

h3.widget-title.changecolour { background-color: #5938A2; }
h3.widget-title.changecolour ~ h3.widget-title { background-color: #BE8A45; }
...
h3.widget-title.changecolour ~ ... ~ h3.widget-title { background-color: #EF4128; }

然后简单地将一个changecolour类添加到第一个h3.widget-title元素。这将自动更改所有其他同级标题的背景颜色

于 2012-08-27T15:10:07.673 回答