if를 사용하여 클래스를 확인한 다음 클래스 jquery를 추가하십시오.

Question

jquery를 처음 사용하며 다음 코드에 몇 가지 문제가 있습니다. 코드를 클릭하면 항목 클래스가 바뀌므로 첫 번째 부분은 예상대로 작동합니다. 항목에 none이라는 클래스가 있으면 featSelected를 추가하지만 다시 선택을 취소하면 none 클래스가 추가되지 않습니다. 모든 아이디어는 내가 jquery (책에서, 비록 일부 코스를 보면서)를 배우는 것에 던져 지듯이 부드럽게 될 것입니다.

<script type="text/javascript"> 
      $('li span[id^="feat"]').click(function(){ 
      if ($(this).hasClass('none')) { 
       $(this).addClass("featSelected") 
      } 

      else if ($(this).hasClass('featSelected')) { 
       $(this).addClass("none") 
      } 

    }) 

    </script> 

어떤 도움을 주시면 감사하겠습니다.

제이슨

Answer 1

사용하여 내장 toggleClass() 기능 :

$('li span[id^="feat"]').click(function(){ 
    $(this).toggleClass("none featSelected"); 
}); 

근무 데모 : 또는 http://jsfiddle.net/7fBLH/

, 당신은 클래스 이름으로 none를 사용하지 않는 것을 고려할 수 있습니다, 그 이후 의미 상으로는 "이 요소에는 class"이 (가)이라고 말하는 것 같습니다. 그런 경우, 당신은 기본 스타일과 CSS 캐스 케이 딩을 사용한다 : 당신이 그것을 제거 didnt는 같은

li span[id^="feat"] { 
    /* default styles here */ 
} 
.featSelected { 
    /* these styles show when the element has this class name */ 
} 

Answer 2

코드에 새 클래스 이름이 추가됩니다.

$('li span[id^="feat"]').click(function(){ 
    $(this).toggleClass("none featSelected"); 
}); 

편집 :

당신이 무엇을하고 있는지에 따라

$('li span[id^="feat"]').click(function(){ 
    if ($(this).hasClass('none')) { 
     $(this).removeClass("none"); 
     $(this).addClass("featSelected"); 
    } else if ($(this).hasClass('featSelected')) { 
     $(this).removeClass("featSelected"); 
     $(this).addClass("none"); 
    } 
}); 

그러나, 당신은 단지 그들 모두 toggleClass을 사용할 수 있습니다 : 당신은 또한 기존의 클래스 이름을 제거해야 난 당신의 코드가 실종됐다 발견 문장의 끝에 세미콜론. 나는 위의 예제에서 그들을 추가했고, 나중에 참조 할 때는 always use semicolons을 javascript로 끝내야한다.

Answer 3

jQuery의 addClass() 메서드는 기존 클래스를 덮어 쓰지 않습니다. 요소의 클래스를 덮어 쓰려면 단순히 addClass()을 호출하는 것 이상의 작업을 수행해야합니다.

'none'클래스를 실제로 제거하지 않으므로 if 문은 항상 true로 평가되고 else 코드는 실행되지 않습니다.