Question

Timer

这里我希望用户点击秒表或计时器后更改文字+计时器的颜色。我试图使用一些JavaScript但无法实现它。

这是我的代码

$(".icon-clock").shieldButton({
        events: {
            click: function () {
                clearInterval(timer);
                startTime = Date.now();
                timer = setInterval(updateProgress, 100);
                $(".colorchange").color(rgb(#0F0)); 
                //It is not going to work I know
            }
        }
    });

这是计时器部分

<li><a href="#" class="dropdown-toggle icon-plus" data-toggle="dropdown">
                                        <span data-placement="bottom" title="Show Timer" class="colorchange">+ Timer </span></a>
                                        <ul class="dropdown-menu timer-wrapper" style="  padding:5px;">     
                                <div class="btn-group">
                                    <button title="" type="button" class="btn btn-default b_fix icon-stopwatch" onclick="start(0);" data-original-title="Stopwatch"></button>
                                    <button title="" type="button" class="btn btn-default b_fix icon-clock" onclick="start(1);" data-original-title="Timer"></button>
                                </div>

Answer 1

尝试：

$(".colorchange").css('color: #0F0');

Answer 2

您正在尝试在jQuery中使用名为color()的方法，但我担心此方法不存在。相反，使用方法css()，这是为了更改css属性：

$(".colorchange").css('color', '#00ff00');

此外，为了使您的代码更具可重用性，我建议您为此创建一个类，并使用addClass()将其添加到元素中。除非你必须换成许多不同的颜色。

Answer 3

即使对象具有多个样式定义，您也可以使用jQuerys css方法：

   $('.colorchange').css({
      'color' : '#0f0',
      'font-weight' : bold
   });

如果您为应该更改颜色的元素定义了多个样式，那将是一个更好的解决方案。您只需要更改对象类名称。把它放到你的CSS中：

.colorchange {
   color: #666;
   font-weight: normal;
}

.colorchange.highlight {
   color: #0f0;
   font-weight: bold;
}

这是你的javascript：

$('.colorchange').addClass('highlight');

这个解决方案将会更加面向未来，因为您可以管理css中的所有样式以及javascript中的所有逻辑。

如何通过改变其他东西的颜色来表明某些东西被点击了？

3 个答案: