jQuery의 클래스 변경은 처음 클릭 할 때만 가능합니다.

Question

모든 jQuery 전문가에게 저의 바보 같은 오류가 무엇인지 지적하는 데 도움을 줄 수 있습니다. 사용자가 핫스팟 클래스로 div를 클릭하면 onclick 클래스를 스왑하려고합니다. 아래 코드는 처음 클릭 할 때 클래스를 교체하지만 두 번째 이후 클래스는 교체하지 않습니다. 또한이 작업을 수행하는 더 깨끗한 방법이 있다면 알려주십시오.

미리 감사드립니다.

jQuery를 :

$('.hotspot').click(function() { 
    if($(this).parent().attr("class") == 'checked'){ 
     $(this).parent().removeClass('checked').addClass('unchecked'); 
    } 
    if($(this).parent().attr("class") == 'unchecked'){ 
     $(this).parent().removeClass('unchecked').addClass('checked'); 
    } 
}); 

마크 업 :

<ul id="prettyCheck"> 
    <li class="checked"> 
      <div class="hotspot"></div> 
      <div class="desc"><div class="descPad">Some text</div></div> 
    </li> 
    <li class="unchecked"> 
      <div class="hotspot"></div> 
      <div class="desc"><div class="descPad">Some text</div></div> 
    </li> 
</ul> 

Answer 1

노력이

$('.hotspot').toggle(function() { 
     $(this).parent().removeClass('checked'); 
     $(this).parent().addClass('unchecked'); 
     // do more here... 
    }, 
    function(){ 
     $(this).parent().removeClass('unchecked'); 
     $(this).parent().addClass('checked'); 
     // do more here... 
}); 

또는

$('.hotspot').click(function() { 
     $(this).parent().toggleClass('checked'); 
     $('checkbox selector').attr('checked', $(this).parent().hasClass('checked')); 
     // do more here... 
    }); 

Answer 2

당신이 chaning없이 시도?

$('.hotspot').click(function() { 
    if($(this).parent().attr("class") == 'checked'){ 
     $(this).parent().removeClass('checked'); 
     $(this).parent().addClass('unchecked'); 
    } 
    if($(this).parent().attr("class") == 'unchecked'){ 
     $(this).parent().removeClass('unchecked'); 
     $(this).parent().addClass('checked'); 
    } 
}); 

Answer 3

나는 문제가 클래스가 이미 선택되어 있다면, 첫 번째 if 문이 후, 선택을 해제하는 것입니다 생각 다음 if에서 다시 확인합니다. 두 번째 if을 else if으로 변경하고 수정했는지 확인하십시오. 나는 그것을했고 또한 .attr('class') == 'checked'을 .hasClass('checked')으로 대체하여 sberry2A가 제안한 바를 수행했으며 저에게 효과적입니다. 그리고 클래스 이름은 정확히 "확인"했다 (같은이 .hasClass('unchecked') 간다 경우 .hasClass('checked')에 대한 테스트는 사실 때문에 당신은 단지 원래의 코드를 한 번 각 요소를 전환 할 수없는 이유에 관해서는,는 다음과 같습니다

편집 클래스 이름은 "확인되지 않음"). jQuery의 addClass() 함수는 주어진 클래스에 공백을 앞에두기 때문에 "checked"클래스를 추가하라는 명령을 내리면 "checked"라는 문자열이 클래스 이름에 추가됩니다. 이 때문에 클래스 이름이 "checked"로 시작하는 요소는 클래스 이름이 "선택 취소"로 변경되며 더 이상 전환하지 못하도록 if 문 중 하나와 일치하지 않게됩니다. 이것이 sberry2A가 hasClass()을 사용하여 제안한 이유입니다. 클래스 이름 내에 여분의 공백이나 다른 클래스가 있더라도 요소의 클래스 이름에 전달한 클래스가 포함되어 있으면 true를 반환하기 때문에 sberry2A가 제안했습니다.

Answer 4

알 수 있습니다. Reigels 코드 외에도 각 핫스팟에 ID를 추가하고 필요한 모든 작업을 수행하는 다른 onclick 함수에 ID를 사용할 수 있습니다.

도움 주셔서 감사합니다.