0

私はHTMLコードを持っています:

<ul>
    <li>Item 1: <button id="down_1">Down</button></li>
    <li>Item 2: <button id="down_2">Down</button><button id="up_2">Up</button></li>
    <li>Item 3: <button id="down_3">Down</button><button id="up_3">Up</button></li>
    <li>Item 4: <button id="down_4">Down</button><button id="up_4">Up</button></li>
    <li>Item 5:                                  <button id="up_5">Up</button></li>
</ul>

リストの順序を更新するためにjQueryを使用したい。

<script>
    $(document).ready(function() {
        $('[id^="down_"]').each(function() {
            var id = this.id;
            $('#' + id).click(function() {
                ///A code to change this <li>..</li> with the next one??
            });
        });
        $('[id^="up_"]').each(function() {
            var id = this.id;
            $('#' + id).click(function() {
                ///A code to change this <li>..</li> with the previous one??
            });
        });
    });
</script>

順序を変更するための JavaScript/jQuery コードの書き方は? たとえば、id="down_3" のボタンを押すと、結果は次のようになります。

<ul>
    <li>Item 1: <button id="down_1">Down</button></li>
    <li>Item 2: <button id="down_2">Down</button><button id="up_2">Up</button></li>
    <li>Item 4: <button id="down_4">Down</button><button id="up_4">Up</button></li>
    <li>Item 3: <button id="down_3">Down</button><button id="up_3">Up</button></li>
    <li>Item 5:                                  <button id="up_5">Up</button></li>
</ul>
4

3 に答える 3

3

当てずっぽう ？

$(document).ready(function() {
    $('[id^="up_"]').on('click', function() {
        var li = $(this).closest('li');
        li.prev('li').before(li);
    });

    $('[id^="down_"]').on('click', function() {
        var li = $(this).closest('li');
        li.next('li').after(li);
    });
});

フィドル

于 2013-03-25T10:20:00.223 に答える
1

代わりに使用できます.on()

$('[id^="down_"]').on('click',function() {  });

そして並べ替え用。

<script type="text/javascript">
    $(function(){
        $('[id^="down_"],[id^="up_"]').on('click',function(){
            var row = $(this).parents("li:first");
            if ($(this).is(".up"))
            {
                row.insertBefore(row.prev());
            }
            else
            {
                row.insertAfter(row.next());
            }
        });
    });
</script>

Demo

于 2013-03-25T10:21:19.717 に答える
0

@adeneoの答えに対するわずかに別のアプローチ：

$('li button.down, li button.up').click(
    function (e) {
        e.preventDefault();
        var that = $(this),
            li = that.closest('li'),
            direction = that.hasClass('down');
        li[direction ? 'insertAfter' : 'insertBefore'](direction ? li.next() : li.prev());
    });

JS フィドルのデモ。

id選択を簡単にするために、s を共有クラス名に変更したことに注意してください。

于 2013-03-25T10:28:26.373 に答える