Question

我正在使用 .find（）来识别重复元素，并为每个元素赋予不同的背景颜色。我想要的是：

手动创建颜色数组（颜色数组）（＃EF4128，＃BA1028，＃2C4534等）
使用“widget-title”类查找所有h3并将它们放入数组（元素数组）
为每个项目指定不同颜色并匹配两个数组。

这对许多人来说应该是一项简单的工作。但是我做了以下操作，因为我不熟悉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>

Answer 1

我会像这样减少您的代码

$(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元素。这将自动更改其他所有兄弟标题的背景颜色

如何创建一个相同元素的数组，并在jquery中为它们提供不同的样式

1 个答案: