0

我有一个表，其中包含一个名为tagbuttondiv 的 div列表，当我单击其中任何一个时，当我单击已复制到 tagselected 的div 时tagdisplay，它们被克隆到另一个 div我希望它被删除并重新出现在.tagselectedtagselectedtagdisplay

到目前为止，我已经设法将它们从中删除，tagselected但我无法让它们重新出现在tagdisplay. 我正在使用find()，但这不起作用......关于如何实现这一目标的任何想法？

谢谢

这是JSFiddle

这是我的html

<div id="tagselected"> </div>

                                 <div id="tagsdisplay">

         <table> 

    <tr> 

        <td>        <div class="tagbutton">Foo 1</div> </td>

         <td>        <div class="tagbutton">Foo 2</div> </td>

         <td>        <div class="tagbutton">Foo 3</div> </td>

         <td>        <div class="tagbutton">Foo 4</div> </td>

         <td>        <div class="tagbutton">Foo 5</div> </td>

     </tr>

         <tr>

         <td>        <div class="tagbutton">Foo 6</div> </td>

         <td>        <div class="tagbutton">Foo 7</div> </td>

         <td>        <div class="tagbutton">Foo 8</div> </td>

       </tr>

            </table>     

             </div>

这是我的 javascript

//initiate the var
var count = 1;

$('.tagbutton').click(function () {

//if the number of tags is bellow 4 then do the following
if(count <= 4){

// Create a clone of the tag and put it in the tagselected div
$(this).clone().appendTo("#tagselected");
$(this).hide();

// Create an hidden input with the value of the tag selected
$('<input>').attr({
    type: 'hidden',
    name: 'tag'+count,
    value: $(this).text(),
}).appendTo('#query');

 count++ ;// adds one to the variable counter

        }

    });

//removes the tag and adds it back to #tagsdisplay    
 $("#tagselected").on('click', '.tagbutton', function () {   
                $(this).remove();
                $("#tagsdisplay").find(this).show(); //Doesn't work ...
                 count-- ;
            });
4

2 回答 2

1

一个被黑的解决方案

    // Create a clone of the tag and put it in the tagselected div
    $(this).clone().appendTo("#tagselected").data('source', this);
    $(this).hide();

然后

//removes the tag and adds it back to #tagsdisplay    
$("#tagselected").on('click', '.tagbutton', function () {
    $($(this).data('source')).show();
    $(this).remove();
    count--;
});

演示：小提琴

于 2013-10-26T06:39:25.797 回答
0

尝试...

//$(this).remove(); // <--get rid of this
$("#tagsdisplay").append($(this)); // <--and just move your element
于 2013-10-26T06:32:55.937 回答