前端大神 和tp大神来看看 如何让循环里的结果每次颜色不一样
下面的volist 中的循环 如何让每次循环的结果 背景颜色都不一样 呢
如下图的效果
.acti{
width: 100%;
height: 70px;
//border: 1px dashed #7E54DC;
background-color: #E7E7E7;
margin-bottom: 5px;
font-size: 12px;
}
<code> <a href="__APP__/Activity/near_acti_content/ac_id/<%7B%24vo.ac_id%7D>"><div class="acti"> <div style="margin-top: 2px;"> <i class="fa fa-book fa-fw"></i> <span style="float: right;"><i class="fa fa-cny fa-fw"></i>元</span> </div> <div style="margin-top: 5px;"> <i class="fa fa-map-marker fa-fw"></i> </div> <div style="margin-top: 6px;"> <i class="fa fa-clock-o fa-fw"></i> </div> </div> </a> </code>
回复内容:
下面的volist 中的循环 如何让每次循环的结果 背景颜色都不一样 呢
如下图的效果
.acti{
width: 100%;
height: 70px;
//border: 1px dashed #7E54DC;
background-color: #E7E7E7;
margin-bottom: 5px;
font-size: 12px;
}
<code> <a href="__APP__/Activity/near_acti_content/ac_id/<%7B%24vo.ac_id%7D>"><div class="acti"> <div style="margin-top: 2px;"> <i class="fa fa-book fa-fw"></i> <span style="float: right;"><i class="fa fa-cny fa-fw"></i>元</span> </div> <div style="margin-top: 5px;"> <i class="fa fa-map-marker fa-fw"></i> </div> <div style="margin-top: 6px;"> <i class="fa fa-clock-o fa-fw"></i> </div> </div> </a> </code>
1.通过循环中的索引添加不同的 class,如 c1, c2 ...在样式中定义这些类的样式。
2.使用css选择器 selector:nth-child(n)
,为某个子元素添加样式。n 可以具体的第 n 个,从 1 开始。也可以是表达式比如 :nth-child(2n)
偶数项、:nth-child(2n+1)
奇数项。
设置好对应的背景色的class
属性。然后根绝循环的索引值取不同的class
属性
<code>.bg0{} .bg1{} .bg1{}</code>
循环时以索引值取
<code>{foreach $key $val} <div class="bg{key}">...</div> {/foreach}</code>
试试看,希望对你有帮助
function getRandomColor() { var strColor = '#'; for (var i = 0; i < 6; i++) { var currnet = Math.random() * 15 | 0; strColor += currnet.toString(16); } return strColor; } $(".acti").css('background-color',getRandomColor());
呵呵呵,用js实现一个全随机的。
你在做webapp吗

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

PHP 8.4 带来了多项新功能、安全性改进和性能改进,同时弃用和删除了大量功能。 本指南介绍了如何在 Ubuntu、Debian 或其衍生版本上安装 PHP 8.4 或升级到 PHP 8.4

CakePHP 是 PHP 的开源框架。它的目的是使应用程序的开发、部署和维护变得更加容易。 CakePHP 基于类似 MVC 的架构,功能强大且易于掌握。模型、视图和控制器 gu

Visual Studio Code,也称为 VS Code,是一个免费的源代码编辑器 - 或集成开发环境 (IDE) - 可用于所有主要操作系统。 VS Code 拥有针对多种编程语言的大量扩展,可以轻松编写

CakePHP 是一个开源MVC 框架。它使开发、部署和维护应用程序变得更加容易。 CakePHP 有许多库可以减少大多数常见任务的过载。

本教程演示了如何使用PHP有效地处理XML文档。 XML(可扩展的标记语言)是一种用于人类可读性和机器解析的多功能文本标记语言。它通常用于数据存储
