如何使用jQuery交換塊？

通過點擊按鈕「向上」或「向下」，塊div與class = poll_row應更改地點與更早或更晚div class = poll_row並更改+1屬性隱藏字段的值屬性或-1如何使用jQuery交換塊？

有以下功能：

資產/ Java腳本/ poll_items.js

$(function(){ 
    $(document).on('click', '.down_id', function() { 
    $(this).siblings('.sequence').val(parseFloat($(this).siblings('.sequence').val()) + 1); 
    $(this).parent().next().children('.sequence').val($(this).parent().next().children('.sequence').val() - 1); 
    $(this).closest('.poll_row').insertAfter($(this).closest('.poll_row').next()); 
    }); 

    $(document).on('click','.up_id', function() { 
    $(this).siblings('.sequence').val(parseFloat($(this).siblings('.sequence').val()) -1); 
     $(this).parent().prev().children('.sequence').val(parseFloat($(this).parent().prev().children('.sequence').val())+ 1); 
    $(this).closest('.poll_row').insertBefore($(this).closest('.poll_row').prev()); 
    });

點擊該鍵可以改變隱藏標籤的價值。

但是隻有雙擊一個按鈕才能反轉塊。我不明白是什麼原因導致沒有任何反應當我第一次點擊時

錯誤在哪裏？

民調/ edit.html.haml

................................................. 
.items-index 
    = f.simple_fields_for :poll_items do |poll| 
     = render 'poll_item_fields', f: poll 
.................................................

民調/ poll_item_fields.html.haml

.poll_row 
    .poll_item 
    = f.input :answer, input_html: { class: 'ctrlenter expanding' }, label: false, placeholder: 'Введите вариант ответа' 
    = f.hidden_field :sequence, class: 'sequence' 
    = button_tag 'вверх', type: 'button', class: 'up_id', value: 'вверх' 
    = button_tag 'вниз', type: 'button', class: 'down_id', value: 'вниз' 
    - if @poll.editable?(current_user) 
     = link_to_remove_association "удалить", f, { wrapper_class: 'poll_item' }

來源

2016-03-04 Stefan Hansch

如果你想要的東西很簡單，就是有重新排序元素和一個隱藏的輸入，每個元素的順序都有一個更簡單的w AY：

$(document).on('click', '.up_id, .down_id', function() { 
 
    var $el, $row; 
 
    $el = $(this); 
 
    $row = $el.parents('.poll_row'); 
 
    // move row up or down one row 
 
    if ($el.hasClass('up_id') && $row.not(':first-child')) { 
 
    $row.prev().before($row); 
 
    } 
 
    else if ($el.hasClass('down_id') && $row.not(':last-child')) { 
 
    $row.next().after($row); 
 
    } 
 
    // reset the sequence inputs 
 
    $row.parent('.polls').find('.poll_row').each(function(i) { 
 
    var $r = $(this); 
 
    $r.find('.sequence').val($r.index() + 1); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- adding a widget wrapper element makes the DOM traversal much more sane --> 
 
<div class="polls"> 
 
    <div class="poll_row" style="background-color: pink"> 
 
    <p>Apples</p> 
 
    <input type="number" class="sequence" value=1> 
 
    <button class="up_id">Up</button> 
 
    <button class="down_id">Down</button> 
 
    </div> 
 
    <div class="poll_row" style="background-color: lightgreen"> 
 
    <p>Oranges</p> 
 
    <input type="number" class="sequence" value=2> 
 
    <button class="up_id">Up</button> 
 
    <button class="down_id">Down</button> 
 
    </div> 
 
    <div class="poll_row" style="background-color: lightblue"> 
 
    <p>Pears</p> 
 
    <input type="number" class="sequence" value=3> 
 
    <button class="up_id">Up</button> 
 
    <button class="down_id">Down</button> 
 
    </div> 
 
</div>

有該標記，是純粹的用於演示一些差異。

來源

2016-03-05 08:20:11 max

如何使用jQuery交換塊？

回答

相關問題