如何在刪除後添加和刪除對象類？

我運行以下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"); 
     } 
    }); 
    } 
});

當我drop一個元素，我click它，它從col-6class變化col，然而當我drop第二項，toggle classes上click只有作品在第二個添加項目上，而不是第一個添加項目。

這裏是一個codepen，嘗試添加一個項目到第二個容器並點擊它，然後放下第二個項目並嘗試點擊它們。

注意

理想我想自動調整大小沒有點擊

來源

2017-09-06 rob.m

我找到的解決方案是使用：

e.stopImmediatePropagation();

Link to doc

最終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(e){ 
     e.stopImmediatePropagation(); 
     if($(this).hasClass("col-6")) { 
     $(this).css("background-color", "red"); 
     $(this).removeClass("col-6").addClass("col"); 
     } else { 
     $(this).css("background-color", "yellow"); 
     $(this).removeClass("col").addClass("col-6"); 
     } 
    }); 
    } 
});

注意

但我仍然想auto size如果el是dropped旁邊其他。

來源

2017-09-06 16:26:41

你的問題是這樣的

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

相反，如果你想擺脫單擊處理程序的，只是想直接添加類，那麼這樣做on 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()

來源

2017-09-06 16:35:10

gotcha，謝謝 –

如何在刪除後添加和刪除對象類？

回答

相關問題