[英]Change the colour of each property in a list (HANDLEBARS JS & CSS)
Using Handlebars I'm able to show a list of artists taken from Spotify.使用 Handlebars 我可以显示从 Spotify 获取的艺术家列表。 I want to be able to change the colour and style of each artist but I don't know how to separate them to do so?
我希望能够更改每个艺术家的颜色和风格,但我不知道如何将它们分开? How do I go about doing this?
我该怎么做呢? Many thanks for any help or pointing me in the right direction.
非常感谢您的帮助或为我指明正确的方向。
<script id="artists" type="text/x-handlebars-template">
<h2>artists
</h2>
<dl class="pull-left">
<dd class="text-overflow" id="artistcolumn">
<ol>
{{#each items}}
<li>{{name}}</li>
{{/each}}
</ol>
</dd>
</dl>
</script>
I've tried using:nth-of-type() or artistcolumn but it hasn't work?我尝试过使用:nth-of-type() 或artistcolumn,但它不起作用?
You could do it by setting the CSS of a list.您可以通过设置列表的 CSS 来做到这一点。 Here is an example:
这是一个例子:
li:nth-child(1){
color: blue;
};
li:nth-child(2){
color:orange;
};
li:nth-child(3){
color:green;
}
Another method to set a color for each list entry would be to add a color to each item you render.为每个列表条目设置颜色的另一种方法是为您呈现的每个项目添加颜色。 If
items
is an Array of Objects you could set items[index].color = #0000FF
and then apply the hex color to each li
HTML element.如果
items
是一个对象数组,您可以设置items[index].color = #0000FF
然后将十六进制颜色应用于每个li
HTML 元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.