用jquery向上和向下移動元素

感謝您提供任何幫助！目前，我使用一個用戶可分類的代碼來允許用戶按順序上下移動項目。現在，我想給每個這些項目提供一組「向上」和「向下」按鈕，讓用戶只需點擊一下即可上下移動項目。我試着返工論文的職位，但我似乎失去了一些東西明顯...用jquery向上和向下移動元素

jQuery Sortable Move UP/DOWN Button move up/down in 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>

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

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

來源

2013-03-18 KDP

缺少分號的錯別字正確的證明？ – lifetimes 2013-03-18 20:05:25

在代碼中有幾個問題需要解決，所以讓我們按順序進行處理。

首先有$('up-button')它缺少.所以它不會選擇按鈕。

接下來，您使用的parent()方法只能上升一級，而應使用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-18 20:22:06 BeardFist

雖然這不是第一個迴應，但它是最豐富和詳細的，所以我可以知道我出錯的地方（並且有很多東西需要學習！）謝謝@BeardFist。 – KDP 2013-03-18 21:41:58

完美的作品。感謝您的優雅和簡潔的解決方案！ +1 – 2015-03-05 11:40:24

你可以嘗試這樣的事情更換您的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-18 20:17:39 Ryan

我給了@BeardFist正確的答案，因爲它提供了更多關於我所犯的錯誤的細節。我也非常感謝你的解決方案;感謝您花時間幫助我。 – KDP 2013-03-18 21:42:58

用jquery向上和向下移動元素

回答

相關問題