JQuery click + this not working

Question

코드 스 니펫을 복사했습니다. 나는 아주 새로운 웹 언어와 자바 배경에서 왔습니다.

JQuery는 훌륭하게 보이지만이 문제를 해결하는 방법을 알 수 없습니다.

http://jsfiddle.net/MMf9Q/2/

당신을 감사합니다.

Answer 1

나는 당신이 그것을 기대하고 있다고 생각하는대로 작동하도록 바이올린을 업데이트했습니다.

if/else 문과 간단한 jQuery 토글 기능 (http://api.jquery.com/toggle/)을 제거했습니다. 객체를 변형시키려는 클래스를 만들었습니다. 코드를 훨씬 더 깔끔하고 체계적으로 유지합니다.

고정 코드 : http://jsfiddle.net/MMf9Q/6/

jQuery를 :

$('#clickme').click(function(){ 
     $(this).toggleClass('red'); 
    }) 

Answer 2

사용 $ (이) 바이올린 JQuery와 객체

$('#clickme').click(function(){ 

    var color = $(this).css('background-color'); 

    if(color == '#cc0000'){ 
     $(this).css('background', '#00CC00'); 
    }else{ 
     $(this).css('background', '#CC0000'); 
    } 
}) 

Answer 3

으로이 요소에 액세스 할 수

,

CSS

.red { 
background:#CC0000; 
} 
.green { 
background:#00CC00; 
} 

HTML

<div id="clickme" class="red"> Click me </div>​ 

JS

$('#clickme').click(function(){ 

    $(this).toggleClass('red green'); 

});​ 

Answer 4

고든, 당신의 코드가를 기했다 그것으로 인한 문제들. 첫 번째는 this을 $()에 넣어야한다는 것입니다. 이는 #clickme 요소를 나타냅니다.

두 번째로, 배경에 대한 요청이 예상했던 것보다 훨씬 자세합니다. alert 또는 console.log에서 반환되는 내용을보고 if 문이 예상했던 것처럼 작동하지 않는 이유를 확인할 수 있습니다. As seen here.

업데이트는 : 여기 updated approach입니다 : 다른 사람이 말했듯이

는

$('#clickme').click(function() { 
    var color = $(this).css('backgroundColor'); 
    if(color == "rgb(0, 204, 0)") { 
     $(this).css('backgroundColor', '#CC0000'); 
    }else{ 
     $(this).css('backgroundColor', '#00CC00'); 
    } 
});​ 

Answer 5

, 대신이의 $ (이)이어야한다. 나는 또한 성능을 위해 다른 변수에 $ (this)를 저장하는 것이 좋습니다. 아마 여기서해야 할 필요는 없지만, 들어가기가 좋은 습관입니다. 특히 뭔가를 반복 할 때 특히 그렇습니다. 이런 식으로 뭔가 :

$('#clickme').click(function(){ 

    var clickedElement = $(this); 
    var color = clickedElement.css('background'); 

    if(color == '#cc0000'){ 
     clickedElement.css('background', '#00CC00'); 
    }else{ 
     clickedElement.css('background', '#CC0000'); 
    } 
})​ 

Answer 6

그것은 대신이

$('#clickme').click(function(){ 

    var color = $(this).css('background-color'); 

    if(color == '#cc0000'){ 
     $(this).css('background-color', '#00CC00'); 
    }else{ 
     $(this).css('background-color', '#CC0000'); 
    } 
})​; 

Answer 7

사용 $ (이) 같이해야한다.선택자를 나타냅니다.

Answer 8

Answers21241 및 iambriansreed는 귀하가 성취하려는 것을 제공하는 멋진 답변을 제공합니다.

하지만 코드에 대해서는 몇 가지 조언을 드리고 싶습니다.

$('#clickme').click(function(){ 

    var color = this.css('background'); 

    if(color == '#cc0000'){ 
     this.css('background', '#00CC00'); 
    }else{ 
     this.css('background', '#CC0000'); 
    } 
})​ 

1) 당신은 페이지로드 후 실행하기 JQuery와 순서를 $(function(){});의 코드를 포장해야한다 : 모든

먼저, 여기에 원래의 자바 스크립트 코드입니다. DOM이 완전히로드되기 전에 그렇지 않으면, 자바 스크립트 코드가 실행되며, 단순히 대부분의 경우 작동하지 않습니다

$(function(){ 
    $('#clickme').click(function(){ 
     var color = this.css('background-color'); 
        alert(color); 
     if(color == '#CC0000'){ 
      this.css('background-color', '#00CC00'); 
     }else{ 
      this.css('background-color', '#CC0000'); 
     } 
    }); 
});​ 

2) this.css()가 작동하지 않습니다. .css()은 jquery 객체의 함수이며,이 경우 jquery 객체가 아닙니다. 당신은 어떤 DOM 요소에서 JQuery와 객체를 구성하는 데 $()로 포장해야합니다

$(function(){ 
    $('#clickme').click(function(){ 
     var color = $(this).css('background-color'); 
     if(color == '#CC0000'){ 
      $(this).css('background-color', '#00CC00'); 
     }else{ 
      $(this).css('background-color', '#CC0000'); 
     } 
    }); 
});​ 

3) 색상 값은 당신이 준 것보다 다른 것을 할 수있다. 브라우저는 16 진수 색상 값을 대부분 RGB 값으로 변환하며 사용자가 얻는 것은 다를 것입니다. 한 번에 alert(color);을 시도하여 가치를 얻고 그에 따라 코드를 변경하십시오. 여기

$(function(){ 
    $('#clickme').click(function(){ 
     var color = $(this).css('background-color'); 
        alert(color); 
     if(color == '#CC0000' || color == 'rgb(204, 0, 0)'){ 
      $(this).css('background-color', '#00CC00'); 
     }else{ 
      $(this).css('background-color', '#CC0000'); 
     } 
    }); 
});​ 

최종 fiddle입니다 : 이것은 당신이 잘못 이해하는 데 도움이 될 것입니다

. 게다가, 방법은 모범 사례가 아닙니다. toggleClass를 사용하고 css 내에서 요소 스타일을 지정하십시오. Answers21241과 iambriansreed는 좋은 방법을 제시했습니다.