如何通過更改其他顏色來指示已單擊某些內容？

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

您甚至可以使用具有多個樣式定義的對象使用jQuery的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中的所有邏輯，因此該解決方案將為將來提供更多證明。