jQuery를 : 이벤트의 변경 CSS는 대상

Question

여기에 나는 그것이 http://jsfiddle.net/mjmitche/rAPcQ/22/

나는 사용자가 각 옆에 친구의 이름을

<button id="add-friend">Add Friend</button> 

<ul id="friends-list"> </ul> 

을 추가 버튼을 클릭 HTML이 동작하지 않습니다 바이올린의 목록의 이름에는 스팬 요소가 풍부합니까? 사용자는 사람이 나는 사용자가 범위를 클릭하면 이름의 색상을 변경할

Jim  [rich?] 

풍부한 경우 표시하기 위해 클릭 할 수 있습니다. 나는 또한 사용자가 앞뒤로

내보기에서 전환 할 수 있도록 변경 스팬 (즉, 부자?)의 HTML을 원하는, 그래서 때 그이

events: { 
     'click span.swap': 'swap', 

    }, 

같은 이벤트를 생성 사용자가 범위를 클릭하면 '스왑'함수가 호출됩니다.

swap: function(e) { 

    var spin = e.target; 
    var tit = $(spin).css('color'); 

    if (tit === 'blue') { 

     $(spin).css('color', 'black'); 
     $(spin).html('poor?'); 

    } else { 

     $(spin).css('color', 'blue'); 
     $(spin).html('rich?'); 

    } 

"스왑"기능의 코드는 클릭 한 요소의 CSS 및 HTML을 변경합니다. 그것은

짐 [부자?]으로 변경됩니다 // 원래 파란색

에

짐 [가난한?] '가난한'블랙 지금

다음을 전환 할 수있는 기능을 제공 //입니다 이미 전환 된 적이 있다면 그러나 '스왑'함수 내부의 코드는 작동하지 않습니다 (jsLint를 전달하고 있음에도 불구하고).

내가 잘못하고있는 것을 말해 줄 수 있습니까? 어떻게 같은 기능의 클래스 "친구"에 싸여 사람의 이름의 CSS를 변경하는 말해 줄 수

업데이트

보너스 포인트합니다.

<span class="friend" style="color:pink">' + this.model.get('name') + '</span> &nbsp; &nbsp; <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[rich?]</span> 

이것은 backbone.js보기를 통해 개별적으로 추가 한 후 추가 된 목록 요소의 컨테이너입니다

<button id="add-friend">Add Friend</button> 

<ul id="friends-list"> </ul> 

HTML

Answer 1

확인이 바이올린 :

swap: function(e) { 

    var $spin = this.$('.swap'); 
    var $name = this.$('.friend'); 
    var text = $spin.text(); 


    if (text.indexOf('rich') != -1) { 

     $spin.css('color', 'black'); 
     $name.css('color', 'green'); //here color for name 
     $spin.html('[poor?]'); 

    } else { 

     $spin.css('color', 'blue'); 
     $name.css('color', 'red');  //here color for name 
     $spin.html('[rich?]'); 

    } 
}, 

Answer 2

계산 된 스타일로 변환되기 때문에이 문제가 RGB 색상.

파랑은 rgb (0, 0, 255)가되어 조건문이 일치하지 않습니다.