Question

我正在开发一个项目，我需要在dblclick上将列表项从list1添加到list2，或者按Add按钮。到目前为止，我已经完成了这个Working jsfiddle。

 $().ready(function() {  
var classHighlight = 'highlight';
var $thumbs = $('ul li').click(function(e) {
    e.preventDefault();
    $thumbs.removeClass(classHighlight);
    $(this).addClass(classHighlight);
});
$('#select1').on ("dblclick","li", function(){
return $(this).appendTo('#select2').removeClass('highlight'); 
});
$('#select2').on ("dblclick","li", function(){
return $(this).remove(); 
});
   $('#add').click(function() {  
   $('#select1 .highlight').appendTo('#select2').removeClass('highlight'); 
   });  
   $('#remove').click(function() {  
     $('#select2 .highlight').remove();
   });  
  });

但是如果你看到点击list1项目也会从list1删除我不想要的点击项目。我只需要将它从list1复制到list2任何人都可以帮我这个吗？谢谢

Answer 1

将现有元素追加到新父元素时，移动它;它没有被复制。您应首先克隆该元素，然后附加克隆元素：

$('#select1').on ("dblclick","li", function(){
  return $(this).clone().appendTo('#select2').removeClass('highlight'); 
});

和

$('#add').click(function() {  
 $('#select1 .highlight').clone().appendTo('#select2').removeClass('highlight'); 
});

<强> Working Demo

Answer 2

你使用clone（）函数来帮助这段代码

$('#select1').on ("dblclick","li", function(){
   return $(this).clone().appendTo('#select2').removeClass('highlight'); 
});

这里的整个代码 http://jsfiddle.net/s41txkng/4/

https://api.jquery.com/clone/

为什么jQuery appendTo会删除现有的列表项？

2 个答案: