我正在运行以下html:
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<div id="container1">
<div class="resizeDiv col-6"></div>
<div class="resizeDiv col-6"></div>
</div>
</div>
<div class="col">
<div id="container2"></div>
</div>
</div>
</div>
</div>
</div>
这是JS
var currentParent;
$(".resizeDiv").draggable({
revert: 'invalid',
containment: "#container2",
start: function(){
currentParent = $(this).parent().attr('id');
}
});
$('#container1, #container2').droppable({
accept:'.resizeDiv',
drop: function(event,ui) {
if (currentParent != $(this).attr('id')) {
$(ui.draggable).appendTo($(this)).removeAttr('style');
}
$(this).find("div").on("click", function(){
if($(this).hasClass("col-6")) {
$(this).removeClass("col-6").addClass("col");
} else {
$(this).removeClass("col").addClass("col-6");
}
});
}
});
当我放下
一个元素并单击
它时,它的class
从col-6
更改为col
,但是当我放置
第二个项目时,点击
上的切换类
仅适用于添加的第二个项目项目,而不是第一个添加的项目。
这是一个codepen ,尝试将一项添加到第二个容器并单击它,然后放下第二项并尝试单击它们。
注意
理想情况下,我想在不点击的情况下自动调整大小
最佳答案
你的问题是这样
$(this).find("div").on("click", function(){
if($(this).hasClass("col-6")) {
$(this).removeClass("col-6").addClass("col");
} else {
$(this).removeClass("col").addClass("col-6");
}
});
它的作用是每次您删除一个元素时,它都会遍历该容器中的所有 div。这意味着您已经设置了单击处理程序,因此当您放置第二个项目时,第一个 div 将获得第二个单击处理程序。如果你丢掉了三分之一,它就会得到三分之一,依此类推。
因此,当您单击第一个回调时,您实际上会触发其中两个回调,并且该类会在第一个回调中添加,并在第二个回调中删除。
由于 ui.draggable
引用了拖动的元素,因此使用它作为添加点击处理程序的引用
$(ui.draggable).on("click",function(){
let $this = $(this);
if($this.hasClass("col-6")) {
$this.removeClass("col-6").addClass("col");
} else {
$this.removeClass("col").addClass("col-6");
}
//note instead of doing the if else and removeClass().addClass()
//calls you could just do toggleClass('col-6 col')
//it will toggle one off and the other on
$this.toggleClass('col-6 col');
});
如果您想摆脱点击处理程序而只想直接添加类,则在 ui.draggable
上执行此操作
$this = $(this);
$draggable = $(ui.draggable);
if (currentParent != $this.attr('id')) {
$draggable.appendTo($this).removeAttr('style').toggleClass('col-6 col');
}
另请注意,我正在存储 jQuery 对象。如果您打算多次使用 $(this)
或 $(ui.draggable)
之类的内容,最好将其存储在变量中并使用它,而不是使多次调用 jQuery()
关于javascript - 删除后如何添加和删除对象类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46079963/