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

从开启切换到关闭时工作正常 - 但我不明白为什么它仍然会进入＆＃34; startSharing＆＃34;部分关闭时。

感谢您的帮助。

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

使用事件委托

＆＃13;

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

＆＃13;

#container div {
  width: 250px;
  height: 100px;
}

.startSharing {
  background-color: green;
}

.startSharing::after {
  content: "start sharing";
}

.stopSharing {
  background-color: red;
}

.stopSharing::after {
  content: "stop sharing";
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="container">
  <div class="startSharing"></div>  
</div>

＆＃13;

Javascript addClass removeClass无法正常工作

3 个答案: