addClass else else do not properly 올바르게 작동하지 않는 경우

Question

기본적으로 내 선택에 따라 클래스를 변경하려고합니다. 처음 변경하면 클래스가 black에서 colored으로 변경되지만 다시 변경하면 및 colored으로 유지됩니다.

내가 변경 될 때 모든 클래스를 제거한 후 hover()을 다시 호출하면 누가이 문제가 발생하는지 설명 할 수 있습니까? 그러면 내 선택에 따라 클래스를 적용해야합니다. 분명히 removeClass 메서드에 대한 주석을 제거하면 작동하지만, 왜 필자는 그것을 필요로하는지 이해하지 못합니다. 미리 감사드립니다.

HTML :

<form> 
    <select name="color"> 
     <option value="black-white">Black/White</option> 
     <option value="colored">Colored</option> 
    </select> 
    <input type="checkbox" checked>Borders (on/off) 
</form> 

jQuery를 :

function hover() { 
    var color = $("select[name=color]").val(); 

    if (color === "black-white") { 
     $("#container > div").hover(function() { 
      /*$(this).removeClass("colored");*/ 
      $(this).addClass("black");  
     }); 
    } else if (color === "colored") { 
     $("#container > div").hover(function() { 
      /*$(this).removeClass("black");*/ 
      $(this).addClass("colored"); 
     }); 
    } 
} 

$("select[name=color]").change(function() { 
    $("#container > div").removeClass(); 
    hover(); 
}); 

Answer 1

당신은 이벤트 핸들러 내부에 이벤트 처리기를 바인딩하고, 두 이벤트 핸들러를 변경하는 기대, 그리고 아마도 더 많은 같은 수 없습니다 선택을 변경하고 요소에 바인딩되며 멀리 가지 않습니다.

당신은되면 핸들러 을 결합해야하고 그냥

$("#container > div").on('mouseenter mouseleave', function(e) { 
 
    var color = $("select[name=color]").val(); 
 

 
    if (color === "black-white") { 
 
     $(this).removeClass("colored").toggleClass("black", e.type==='mouseenter'); 
 
    } else if (color === "colored") { 
 
     $(this).removeClass("black").toggleClass("colored", e.type==='mouseenter'); 
 
    } 
 
});

#container div { 
 
    height: 100px; 
 
    width: 100px; 
 
    position: relative; 
 
    border: 1px solid #000; 
 
    margin: 20px; 
 
    color: red; 
 
} 
 

 
#container div.colored { 
 
    background: green 
 
} 
 

 
#container div.black { 
 
    background: black 
 
} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="color"> 
 
    <option value="black-white">black-white</option> 
 
    <option value="colored">colored</option> 
 
</select> 
 

 
<div id="container"> 
 
    <div>Hover me</div> 
 
</div>