13

あなたが提供できるどんな助けにも感謝します！現在、私はuiソート可能なコードを使用して、ユーザーがアイテムを順番に上下に移動できるようにしています。ここで、これらの各アイテムに、ユーザーがクリックするだけでアイテムを上下に移動できる「上」ボタンと「下」ボタンのセットを提供したいと思います。これらの投稿を作り直してみましたが、明らかな何かが欠けているようです...

jQueryソート可能上下移動ボタン jqueryで上下に移動

どういうわけか、jqueryを正しい要素に適用していないと思います。私のjsfiddleはここにあります：http：//jsfiddle.net/kevindp78/vexw5/2/そしてコードは以下にあります。

HTML

<div id="box" class="ui-sortable" style="display: block;"> 
<div class="leg">
    <a class="image">IMG1</a>
    <div class="details">
        <h3><a href="/details">Info</a></h3>
        <span class="moreinfo">MoreInfo</span>
    </div>
    <div class="clear"></div>
    <div class="up-down">
        <p>Change Order</p>
        <div class="up">
            <input type="button" value="Up" class="up-button"/>
        </div>
        <div class="down">
            <input type="button" value="down" class="down-button"/>
        </div>
    </div>
    <div class="morestuff">
        Stuff1
    </div>
</div>
<div class="leg">
    <a class="image">IMG2</a>
    <div class="details">
        <h3><a href="/details">Info</a></h3>
        <span class="moreinfo">MoreInfo</span>
    </div>
    <div class="clear"></div>
    <div class="up-down">
        <p>Change Order</p>
        <div class="up">
            <input type="button" value="Up" class="up-button"/>
        </div>
        <div class="down">
            <input type="button" value="down" class="down-button"/>
        </div>
    </div>
    <div class="morestuff">
        Stuff2
    </div>
</div>
<div class="leg">
    <a class="image">IMG3</a>
    <div class="details">
        <h3><a href="/details">Info</a></h3>
        <span class="moreinfo">MoreInfo</span>
    </div>
    <div class="clear"></div>
    <div class="up-down">
        <p>Change Order</p>
        <div class="up">
            <input type="button" value="Up" class="up-button"/>
        </div>
        <div class="down">
            <input type="button" value="down" class="down-button"/>
        </div>
    </div>
    <div class="morestuff">
        Stuff3
    </div>

</div>

JS

$('up-button').click(function(){
$(this).parent('.leg').insertBefore.previous('.leg')
});

$('.down-button').click(function(){
$(this).parent('.leg').insertAfter.next('.leg')
});
4

2 に答える 2

20

コードで対処すべき問題がいくつかあるので、それらを順番に見ていきましょう。

まず、ボタンが選択されていないため$('up-button')、欠落して.いることがあります。

次にparent()、1レベルだけ上がる方法を使用していますが、parents('.leg')代わりに使用してください。

insertBefore()は、選択したコンテンツを配置する場所に関するターゲットを受け入れるメソッドです。

previous()は関数ではなく、関数でprev()あり、前の要素を選択するだけなので、パラメーターは必要ありません。

これらの修正をすべて組み合わせると、次のようになります。

$('.up-button').click(function(){
  $(this).parents('.leg').insertBefore($(this).parents('.leg').prev());
});

$('.down-button').click(function(){
  $(this).parents('.leg').insertAfter($(this).parents('.leg').next());
});

この編集されたフィドルで示されているようにhttp://jsfiddle.net/vexw5/6/

于 2013-03-18T20:22:06.213 に答える
8

JS を次のように置き換えてみてください。

$(".down").click(function () {
    var $parent = $(this).parents(".leg");
    $parent.insertAfter($parent.next()); 
});

$(".up").click(function () {
    var $parent = $(this).parents(".leg");
    $parent.insertBefore($parent.prev()); 
});

http://jsfiddle.net/vexw5/7/

これはあくまでも基本です。アニメーションなどはありません。

于 2013-03-18T20:17:39.317 に答える