6

リスト項目をある順序付けられていないリストから別のリストに移動しようとしています。これは最初は正常に機能しますが、アイテムを移動すると元に戻すことができません。私が話していることを説明するためにフィドルを作りました。

ここでチェックしてください-> jsfiddle

HTML

<table>
    <tr>
        <td>Numbers</td>
        <td>Letters</td>
    </tr>
    <tr>
        <td>
            <ul class='list1'>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </td>
        <td>
            <ul class='list2'>
                <li>a</li>
                <li>b</li>
                <li>c</li>
                <li>d</li>
                <li>e</li>
            </ul>
        </td>
    </tr>
</table>
<input type='button' value='<<' id='move_left' />
<input type='button' value='>>' id='move_right' />

jQuery

$('body').on('click', 'li', function() {
   $(this).toggleClass('selected');
});

$('#move_left').click(function() {
    $('.list1').append('<li>', $('.list2 .selected').text(), '</li>');
    $('.list2 .selected').remove();
});

$('#move_right').click(function() {
    $('.list2').append('<li>', $('.list1 .selected').text(), '</li>');
    $('.list1 .selected').remove();
});

CSS

ul {
    list-style-type:none;
    padding:0px;
    margin:0px;
}

.selected {
    background-color:#efefef;
}

ご覧のとおり、アイテムは左から右、または右から左に移動しますが、一度移動すると元に戻すことはできません。どんな助けでも大歓迎です。

4

2 に答える 2

18

思ったより簡単です:

$('#move_left').click(function() {
    $('.list1').append($('.list2 .selected').removeClass('selected'));
});

$('#move_right').click(function() {
    $('.list2').append($('.list1 .selected').removeClass('selected'));
});

http://jsfiddle.net/KjJCa/2/

既存の要素を別の要素に追加すると、そこに移動されます。要素を複製して、元の要素を手動で削除する必要はありません。

于 2013-08-30T21:04:00.480 に答える
3

試す：

$('#move_left').click(function() {
    $('.list2 .selected').each(function(){
    $('.list1').append('<li>'+$(this).text()+'</li>');
    });
    $('.list2 .selected').remove();
});

$('#move_right').click(function() {
    $('.list1 .selected').each(function(){
    $('.list2').append('<li>'+$(this).text()+'</li>');
    });
    $('.list1 .selected').remove();
});

http://jsfiddle.net/liamallan1/KjJCa/3/

于 2013-08-30T21:05:26.363 に答える