[英]Jquery move element from a div to another
我有两个列表:第一个显示在左侧,第二个显示在右侧。 我希望如果我单击左侧的一个元素,则将其删除,并将其置于右侧列表的前面(以及相反的操作)
这是我的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”示例,则没有任何关联的click事件,并且不会再次出现在左侧列表中。
如何解决此问题并绑定对“新元素”的点击?
在这里,JSFiddle上的工作代码http://jsfiddle.net/uw446/1/
$("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);
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.