Question

我有一个时钟，我想改变时间的颜色，让我们说小时是红色，而小时是绿色。

我的div有analog时间。

<div class="analog">analog</div>

然后我的JS用我的时间替换analog中的内容。

//analog time
$('.analog').html(hours + ':' + minutes);

我的CSS会更改所有analog红色，并计划在我的minutes var中添加一个类，将其更改为绿色，但似乎无法弄明白。

我尝试过的事情是.addClass()的变体，例如：

//analog time
$('.analog').html(hours + ':' + minutes).addClass('mins');

//analog time
$('.analog').html(hours + ':').html(minutes).addClass('mins);

我并不确定如何实现这一点，因为div被替换为一体，因为＆＃39;模拟＆＃39;变成了10:27＆＃39;在屏幕上。

感谢您的帮助！

Answer 1

你不需要将它们绑在一起，你可以这样做：

$('.analog').html(hours + ':' + minutes);
$('.analog').addClass('mins');

还尝试为时钟创建id并按其选择（它将是$('#id')）。

Answer 2

将 span 用于小时，将其他用于分钟

$('.analog').html(
     "<span class='hours'>"+hours+"</span>" + 
     ':' + 
     "<span class='mins'>"+minutes+"</span>"
);

Answer 3

您需要创建分钟和小时的单独元素。

$('.analog').html('<span id="hours">' + hours + '</span>' + ':' + '<span id="mins">' + minutes + '</span>');
$('#hours').addClass('hours');
$('#mins').addClass('mins');

或者，如果您不需要动态更改这些类，可以将这些类直接放在span标记中。

Answer 4

$('.analog').html('<span class="hours">' + hours + '</span>' + ':' + '<span class="mins">' + minutes + '</span>');

将类添加到动态加载的html

4 个答案: