Javascript 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'); 
}); 

從開到關切換時，它工作正常 - 但我不明白爲什麼它仍然去當它關閉時進入「startSharing」部分。

謝謝你的幫助。

Answer 1

在這種情況下，您將處理程序設置爲特定元素。一旦它們被設置 - 它們被設置，而不管選擇器是否改變。

你可以在.startSharing元素上定義它，如果它們都是這樣開始的。然後，你可以使用.toggleClass()輕鬆地切換他們開/關：

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

Answer 2

您也可以委託這樣的單擊事件：

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

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

這樣做，這樣也可以讓動態生成到觸發事件。在你的情況下，.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>