首页 > 分享 > 根据小时动态地尝试颜色代码行

根据小时动态地尝试颜色代码行

问题在于,在您的循环中,您正在更新all .description元素的类,而不是forEach循环中的类。

为了解决这个问题,并使代码更加简洁,您可以将一个函数传递给jQuery的addClass()方法,该方法将根据集合中的每个元素单独进行评估。在这个函数中,您可以对照当前时间(不需要id )检查元素的MomentJS,并设置适当的类。试试这个:

代码语言:javascript

AI代码解释

复制

// let nowHour = (new Date()).getHours(); let nowHour = 13; // hard-coding value for this demo $('.description').addClass(function() { return +this.id === nowHour ? 'present' : +this.id < nowHour ? 'past' : 'future'; });

代码语言:javascript

AI代码解释

复制

.present { background-color: #C00; } .past { background-color: #CCC; } .future { background-color: #0C0; }

代码语言:javascript

AI代码解释

复制

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="description" id="9">9am</div> <div class="description" id="10">10am</div> <div class="description" id="11">11am</div> <div class="description" id="12">12pm</div> <div class="description" id="13">1pm</div> <div class="description" id="14">2pm</div> <div class="description" id="15">3pm</div> <div class="description" id="16">4pm</div> <div class="description" id="17">5pm</div>

相关知识

根据小时动态地尝试颜色代码行
掌握颜色代码:设计与编程的基础
Python 颜色代码大全
粉红颜色代码
紫色颜色代码
青色颜色代码
灰色/灰色颜色代码
粉色颜色代码,嫩粉色的rgb是多少
基于颜色名称的颜色代码
HTML颜色代码是什么?给网页设计师的快速入门指南

网址: 根据小时动态地尝试颜色代码行 https://m.huajiangbk.com/newsview2566525.html

所属分类:花卉
上一篇: 如何知道R中某个命名颜色的rgb
下一篇: html颜色代码对照表