클래스를 변경하지 않고 버튼의 색상을 변경하십시오.

Question

jQuery를 처음 사용하고 모든 클래스를 변경하지 않고 버튼의 색상을 변경하려면 클릭해야합니다. 어떻게 할 수 있니? 난 그냥 클릭 버튼에 색상을 변경해야 할 첫 번째 버튼을 클릭하면

<div class="button">First button</div> 
<div class="button">Second button</div> 
<div class="button">3 button</div> 
<div class="button">4 button</div> 

$('.button').on('click', function() { 
    $('.button').css('background-color', '#C00'); 
}) 

.button { 
    background-color: #9C0; 
    height: 50px; 
    width: 100px; 
    margin-top:5px; 
} 

http://jsfiddle.net/nJ895/

그래서 모든 버튼에 그렇게 그렇게 할 수있는 방법이 있나요?

UPDATE :

그와 함께 작동 난 당신의 솔루션을 시도하지만 내 코드를 더 복잡하고 해달라고 미안 : http://jsfiddle.net/nJ895/7/

을 여기에 내가 "1 개 버튼"이 클릭하면 내가 지금 몇 가지 문제를 해결하기 위해 필요 버튼이 색상을 변경해야하지만 "2 버튼"을 클릭하면 "1 버튼이 색상을 잃어 버려야합니다"와 "2 버튼이 색상을 얻습니다"... 두 번째 "1 버튼"과 "2 버튼"의 afect가 아닙니다. 같은 방식으로 작동해야하는 다른 div ... 제발 도와주세요. 또한 #id_는이 경우 중요하지 않지만 모든 코드를 표시하려면 여기에 필요합니다.

Answer 1

$('.button').on('click', function() { 
    $(this).css('background-color', '#C00'); 
}); 

업데이트 데모 : 당신이 jQuery를 처음 접하는 때문에 http://jsfiddle.net/nJ895/1/

, 나는 무슨 일이 일어나고 있는지 설명 할 것이다. 원래 코드에서는 클래스가 .button 인 모든 노드를 선택하고 모든 노드에 클릭 이벤트를 바인딩합니다. 임의의 노드가 클릭되면 모든 노드를 다시 선택하고 모두에 CSS 을 적용합니다. $(this) 개체는 방금 발생한 이벤트에 바인딩 된 노드를 가리키고 적절한 노드에만 CSS를 적용합니다.

리터럴 CSS를 적용하는 대신 새 클래스를 추가하는 것이 좋습니다. JavaScript 코드에서 스타일을 유지할 수 있습니다.

CSS :

.button { 
    background-color : #9C0; 
    height   : 50px; 
    width   : 100px; 
    margin-top  : 5px; 
} 
.button.active { 
    background-color: #C00; 
} 

jQuery를 :

$('.button').on('click', function() { 
    $(this).toggleClass('active'); 
}); 

데모 : http://jsfiddle.net/nJ895/3/

또는 한 번에 선택 버튼 하나로 원하는 경우 :

을

데모 : http://jsfiddle.net/nJ895/5/

Answer 2

시도는 $('.button')라는 이름의 컬렉션 모든 버튼을 대상으로 한 귀하의 경우에는 $(this)

$(this).css('background-color', '#C00'); 

를 사용하여. 이벤트가 발생한 현재 객체에 이벤트를 캡처해야합니다.

Answer 3

당신은 클릭 된 요소

---

$('.button').on('click', function() { 
    $(this).css('background-color', '#C00'); 
}) 

하지만 색상을 변경하는 더 정확한 방법은 추가 클래스

CSS

.button { 
    background-color: #9C0; 
    height: 50px; 
    width: 100px; 
    margin-top:5px; 
} 
.button.active{ 
    background-color: #c00; 
} 

을 사용하는 것을 목표로 this를 사용할 필요가

jQuery를

$('.button').on('click', function() { 
    $(this).addClass('active'); 
}); 

내 영어에 대한 http://jsfiddle.net/nJ895/2/ 또한

Answer 4

jQuery('.button').live('click', function() { 
    jQuery(this).css('background-color', 'red'); 
})