如何通过更改其他颜色来指示已单击某些内容？

Question

Here I want the color of text +Timer to change once user clicks on stopwatch or timer. I tried to use some JavaScript but could not implement it.

Here is my code

$(".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
            }
        }
    });

Here is the timer part

<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

You are trying to use a method called color() in jQuery, but I'm afraid this method doesn't exists. Instead, use the method css() , which is made to change css properties:

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

Further, to make your code more reusable, I suggest you to create a class for this purpose and add it to the element with addClass() . Unless you have to change to many different colors.

Answer 3

You may use jQuerys css method even with an object with several style definitions:

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

It would be an even better solution if you defined several styles for the element that should change the color. You would only need to change the objects class name. Put this into your css:

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

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

And this in your javascript:

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

This solution would be more future proof as you could manage all the styles in your css and all the logic in your javascript.