0

tagbuttonと呼ばれる div で呼び出される divのリストを含むテーブルがありtagdisplayます。それらのいずれかをクリックするとtagselected、tagselected にコピーされた div をクリックすると別の div に複製されます。削除しtagselectedて再表示したいtagdisplay.

これまでのところ、それらを削除する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 に答える