使用JQuery检查多个元素以确定其颜色
使用JQuery检查多个元素以确定其颜色
提问于 2020-04-03 06:39:43
我正在建立一个基本的生产力计划，我需要一种方法将不同时间块的颜色设置为灰色、红色或绿色，这取决于它们是过去、现在还是未来。例如，如果我们目前正处于5点钟，则带有计划事件文本的时间块将需要为红色。
下面的代码是我尝试过的，但我无法让它工作
HTML -使用引导程序。我有8行，每个工作日的每小时一行(9-5)。注意数据-时间属性。它被设置为它所代表的任何时刻。
<div class = "row" data-time = "9">
<div class = "col-md-3">
<p>0900</p>
</div>
<div class = "col-md-6">
<textarea class = "event-field"></textarea>
</div>
<div class = "col-md-3"><button type="submit" class="btn btn-primary"></button></div>
</div>var date = new Date();
var time = date.getHours();
$(document).ready(function() {
var rows = $("div.row")
var dataAttString = rows.dataset.time;
var dataAttNum = Number(dataAttString);
if (dataAttNum < time) {
rows.addClass("past");
}
else if (dataAttNum === time) {
rows.addClass("present");
}
else if (dataAttNum > time) {
rows.addClass("future");
}
});回答 2
Stack Overflow用户
回答已采纳
发布于 2020-04-03 06:58:11
我没有混合jQuery和Vanilla，而是用jQuery编写了所有代码。
主要问题是.rows是divs的数组，即
var rows = $("div.row")因此，您需要遍历数组中的每个元素，以确定其值，并根据data-time属性更改其bg颜色。
参见下面的演示
// getting current hours from timestamp;
var date = new Date();
var time = date.getHours();
// once document is loaded and ready
$(document).ready(function() {
var rows = $("div.row")
// rows is an array of divs, let's work with each element one by one
$.each(rows, function(idx, row) {
//remove previous classes assigned to it (this may not be necessary)
$(row).removeClass("past");
$(row).removeClass("present");
$(row).removeClass("future");
// Read the value of the data-time attribute & turn it into a number
var dataAttString = $(row).data('time');
var dataAttNum = Number(dataAttString);
// assign a CSS class according to the current hour (calculated at the beginning)
if (dataAttNum < time) {
$(row).addClass("past");
} else if (dataAttNum === time) {
$(row).addClass("present");
} else if (dataAttNum > time) {
$(row).addClass("future");
}
});
});/* CSS Classes */
.past {
background-color: lightgray;
}
.present {
background-color: lightgreen;
}
.future {
background-color: lightblue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" data-time="0000">
<div class="col-md-3">
<p>0001</p>
</div>
<div class="col-md-6">
<textarea class="event-field"></textarea>
</div>
<div class="col-md-3"><button type="submit" class="btn btn-primary"></button></div>
<div class="row" data-time="12">
<div class="col-md-3">
<p>0900</p>
</div>
<div class="col-md-6">
<textarea class="event-field"></textarea>
</div>
<div class="col-md-3"><button type="submit" class="btn btn-primary"></button></div>
</div>
Stack Overflow用户
发布于 2020-04-03 06:54:48
尝尝这个。
$(document).ready(function() {
var date = new Date();
var time = date.getHours();
var rows = $("div.row")
rows.each(function(){
var dataAttNum = $(this).data('time');
if (dataAttNum < time) {
$(this).addClass("past");
}
else if (dataAttNum === time) {
$(this).addClass("present");
}
else if (dataAttNum > time) {
$(this).addClass("future");
}
})
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61006336
复制相关文章
相似问题
腾讯云开发者
