자바 스크립트 addClass removeClass가 원하는대로 작동하지 않습니다.

Question

아이콘을 클릭하면 켜기/끄기를 원합니다. 내 HTML 파일에서

내가 가진 :

<div class="startSharing"></div> 

그리고 내 JS에서 :

$('.startSharing').click(function() { 
    $(this).removeClass('startSharing'); 
    $(this).addClass('stopSharing'); 
}); 

$('.stopSharing').click(function() { 
    $(this).removeClass('stopSharing'); 
    $(this).addClass('startSharing'); 
}); 

on에서 off로 전환 할 때 그것은 잘 작동 -하지만 여전히 간다 왜 이해가 안 돼요 꺼지면 "startSharing"섹션으로 이동하십시오.

도움 주셔서 감사합니다.

Answer 1

이 경우 핸들러를 특정 요소로 설정합니다. 설정이 끝나면 선택기가 변경되는 것과 관계없이 설정됩니다.

모두가 시작되면 .startSharing 요소에서 정의 할 수 있습니다. 그런 다음, 당신은 쉽게/그들을에 전환 .toggleClass()을 사용할 수 또한 트리거에 동적으로 생성 된 수 이런 식으로 이렇게

$('body').on('click', '.startSharing', function() { 
    $(this).removeClass('startSharing').addClass('stopSharing'); 
}); 

$('body').on('click', '.stopSharing', function() { 
    $(this).removeClass('stopSharing').addClass('startSharing'); 
}); 

:

$('.startSharing').click(function() { 
    $(this).toggleClass('startSharing stopSharing'); 
}); 

Answer 2

당신은 또한이 같은 클릭 이벤트를 위임 할 수있다 이벤트. 귀하의 경우 .stopSharing이 동적으로 생성되었습니다.

Answer 3

$('#container').on('click',".startSharing,.stopSharing",function(){ 
 
    
 
    $(this).toggleClass('startSharing').toggleClass('stopSharing'); 
 
    
 
});

#container div { 
 
    width: 250px; 
 
    height: 100px; 
 
} 
 

 
.startSharing { 
 
    background-color: green; 
 
} 
 

 
.startSharing::after { 
 
    content: "start sharing"; 
 
} 
 

 
.stopSharing { 
 
    background-color: red; 
 
} 
 

 
.stopSharing::after { 
 
    content: "stop sharing"; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="container"> 
 
    <div class="startSharing"></div> 
 
</div>

정말 도움이