如何使用jQuery交换块？

Question

点击按钮＆＃34;向上＆＃34;或＆＃34; down＆＃34;块 div with class = poll_row 应该使用更早或更晚的 div使用class = poll_row 更改位置，并更改+1或-1上隐藏字段的value属性/ p>

具有以下功能：

assets / javascripts / 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' }

Answer 1

如果您想要的只是具有可重新排序的元素和具有每个元素顺序的隐藏输入，则有一种更简单的方法：

$(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>

标记中存在一些纯粹用于演示目的的差异。