다른 것의 색상을 변경하여 무언가가 클릭되었음을 나타내는 방법은 무엇입니까?

Question

여기서 사용자가 스톱워치 또는 타이머를 클릭하면 텍스트 + 타이머의 색상을 변경하고 싶습니다. 자바 스크립트를 사용하려고했지만 구현할 수 없었습니다.

여기 여기 내 코드

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

, 하지만이 방법은 존재하지 않습니다. 대신, CSS 속성을 변경하기 위해 만들어지는 방법 css(), 사용

또한

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

, 당신의 코드를 더 재사용 만들기를, 나는 당신이이 목적을 위해 클래스를 생성하고 addClass()과 요소에 추가하는 것이 좋습니다. 다양한 색상으로 변경해야하는 경우가 아니라면

Answer 2

보십시오 : 당신은 jQuery를에 color()라는 방법을 사용하려고

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

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; 
} 

그리고 이것은 당신의 자바 스크립트 : 당신이 당신의 자바 스크립트에서 CSS에있는 모든 스타일과 모든 논리를 관리 할 수 ​​있기 때문에

는

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

이 솔루션은 더 미래의 증거가 될 것이다 .