Question

我做了一点快速的“添加到收藏夹”类型的练习程序。您单击“收藏夹”框并将其添加到侧边栏。

这是JSFiddle：http://jsfiddle.net/LCBradley3k/sdKgP/

使用Javascript：

$(document).ready(function(){
    var favorites = [];
    var counter = 0;

    $('#container, #container2, #container3').click(function(){
       favorites.push($(this))            
        $('.favorite').append(favorites);
    });  
});

我希望它继续做它的功能，但不要让原始容器消失。

此外，有没有办法让它知道点击了哪个容器，然后移动那个特定的容器，而不是说$(container 1, 2, 3, etc)。就像我有50个容器一样？我不想列出所有这些。

Answer 1

这是工作中的JSFiddle http://jsfiddle.net/9Dmcg/3/

给容器一个类并绑定到类。

$('.containers').bind('click', function(){

    favorites.push($(this).clone())

    $('.favorite').append(favorites);
});

看起来jcubic具有正确的克隆语法

Answer 2

尝试使用jQuery的clone()：

$('#container, #container2, #container3').click(function(){
  $(this).clone().appendTo('.favorite');
});

Answer 3

您可以使用clone jquery function http://jsfiddle.net/sdKgP/1/

$('#container, #container2, #container3').click(function(){

    favorites.push($(this).clone())

    $('.favorite').append(favorites);
});

Answer 4

试试这个http://jsfiddle.net/sdKgP/25/

你应该乘坐容器的id。在您的情况下，因为您可能有许多书签容器，所以您不想为每个容器添加css。所以你也需要改变你的CSS。

CSS

#sidenav {
height:700px;
width:250px;
border: 1px solid rgb(150,150,150);
position:absolute;
display:inline;
float: right;
left: 125px;
}

.container {
height:50px;
width:75px;
border:1px solid #000;
position:relative;
margin-bottom:10px;
}

DOM

<div style="float:left">
<div class="container">
 Favorite
 </div>

<div class="container">
  Favorite
</div>

<div class="container">
  Favorite
 </div>
</div>
 <div>
 <div id="sidenav">
  <div class="favorite"> </div>
 </div>
</div>

JS：

 $(document).ready(function(){
   var favorites = [];
   var counter = 0;
  $('.container').click(function(){
    favorites.push($(this).clone());
    $('.favorite').append(favorites);
 });
});

使用.append（）时，原始对象消失

4 个答案: