gpt4 book ai didi

javascript - JQuery - 删除主体点击时添加的类

转载 作者:行者123 更新时间:2023-11-28 14:46:30 27 4
gpt4 key购买 nike

检查下面的代码片段或这个 fiddler 。我想从下面的代码片段中实现两件事,那就是

  1. 点击 .myDiv 时添加 .myBackground
  2. 点击 body 上其他位置时删除 .myBackground

当我单独尝试它们时,它们工作得非常好。但是当我尝试同时实现这两个目标时,却没有按预期工作。我知道当点击我的 div 时,两个点击事件都会被触发,这就是 .myBackground 没有被添加的原因。还有其他方法可以实现我的要求吗?

$(document).ready(function() {
$(document).on('click', '.myDiv', function() {
$(this).addClass('myBackground');
});
$(document).on('click', 'body', function() {
$('.myDiv.myBackground').removeClass('myBackground');
})
});
.myDiv {
height: 100px;
width: 100%;
background: cyan;
}

.myBackground {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv">
</div>

任何帮助表示赞赏。提前致谢。

最佳答案

您的主体中有该元素,因此当您单击它时,它会注册两次单击,仅当该元素不是 .myBackground/myDiv 元素时才使用 if 触发删除

$(document).ready(function() {
$(document).on('click', '.myDiv', function() {
$(this).addClass('myBackground');
});
$(document).on('click', 'body', function(e) {
if (!$(e.target).is('.myBackground'))
$('.myBackground').removeClass('myBackground');
})
});
body {
height: 200px;
width: 100%;
}

.myDiv {
height: 100px;
width: 100%;
background: cyan;
}

.myBackground {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
<div class="myDiv">
</div>
</body>

关于javascript - JQuery - 删除主体点击时添加的类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46190974/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com