jQuery将元素从div移动到另一个div
我有两个列表：第一个列表显示在左侧，第二个列在右侧。 我想要的是，如果我点击左边的一个元素，他将被删除，并且他被预先添加到右边的列表中（以及相反的动作）
这是我的html：
<div class="cont">
<div id="groupL" class="innDiv">
<div id="1" class="aaaL">Value 1</div>
<div id="2" class="aaaL">Value 2</div>
</div>
<div id="groupR" class="innDiv">
<div id="4" class="aaaR">Value 4</div>
<div id="3" class="aaaR">Value 3</div>
</div>
</div>
这是javascript源代码。
var clickLtoR = function(n){
_this = $('#'+n);
$('#groupR').prepend('<div class="aaaR" id="'+n+'">'+_this.html()+'</div>');
_this.remove();
}
var clickRtoL = function(n){
_this = $('#'+n);
$('#groupL').prepend('<div class="aaaL" id="'+n+'">'+_this.html()+'</div>');
_this.remove();
}
$('.aaaL').click(function(){
clickLtoR($(this).attr("id"));
});
$('.aaaR').click(function (){
clickRtoL($(this).attr("id"));
});
如果我点击“Value1”的例子，我需要把这个div移到右边。
它的工作原理..但是如果我再次点击相同的元素，例如在“值1”之前的例子之后，这没有任何关联的点击事件，并且不回到左边的列表。
如何解决这个问题，并绑定点击“新元素”？
在这里，JSFiddle上的工作代码http://jsfiddle.net/uw446/1/
http://jsfiddle.net/uw446/2/
$("div.el").on("click", function() {
var $this = $(this);
if ($this.hasClass("aaaL")) {
$this.removeClass("aaaL").addClass("aaaR").prependTo("#groupR");
} else {
$this.removeClass("aaaR").addClass("aaaL").prependTo("#groupL");
}
});
你确实过于复杂。 以上应该完美无缺地工作。
尝试这个..
$('div.cont div div').click(function(){
var $value = $(this);
var $parent = $value.parent();
if($parent.attr('id') == 'groupL'){
$parent.next('#groupR').prepend($value);
}else if($parent.attr('id') == 'groupR'){
$parent.prev('#groupL').prepend($value);
}
})
http://jsfiddle.net/uw446/4/
链接地址: http://www.djcxy.com/p/42549.html