前端大神 和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吗

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



PHP 8.4 membawa beberapa ciri baharu, peningkatan keselamatan dan peningkatan prestasi dengan jumlah penamatan dan penyingkiran ciri yang sihat. Panduan ini menerangkan cara memasang PHP 8.4 atau naik taraf kepada PHP 8.4 pada Ubuntu, Debian, atau terbitan mereka

Untuk bekerja dengan tarikh dan masa dalam cakephp4, kami akan menggunakan kelas FrozenTime yang tersedia.

Untuk mengusahakan muat naik fail, kami akan menggunakan pembantu borang. Di sini, adalah contoh untuk muat naik fail.

CakePHP ialah rangka kerja sumber terbuka untuk PHP. Ia bertujuan untuk menjadikan pembangunan, penggunaan dan penyelenggaraan aplikasi lebih mudah. CakePHP adalah berdasarkan seni bina seperti MVC yang berkuasa dan mudah difahami. Model, Pandangan dan Pengawal gu

Pengesah boleh dibuat dengan menambah dua baris berikut dalam pengawal.

Log masuk CakePHP adalah tugas yang sangat mudah. Anda hanya perlu menggunakan satu fungsi. Anda boleh log ralat, pengecualian, aktiviti pengguna, tindakan yang diambil oleh pengguna, untuk sebarang proses latar belakang seperti cronjob. Mengelog data dalam CakePHP adalah mudah. Fungsi log() disediakan

Kod Visual Studio, juga dikenali sebagai Kod VS, ialah editor kod sumber percuma — atau persekitaran pembangunan bersepadu (IDE) — tersedia untuk semua sistem pengendalian utama. Dengan koleksi sambungan yang besar untuk banyak bahasa pengaturcaraan, Kod VS boleh menjadi c

CakePHP ialah rangka kerja MVC sumber terbuka. Ia menjadikan pembangunan, penggunaan dan penyelenggaraan aplikasi lebih mudah. CakePHP mempunyai beberapa perpustakaan untuk mengurangkan beban tugas yang paling biasa.
