如何使用 jQuery 交换方块？

Question

通过单击按钮 "up" 或 "down" 块 div 和 class = poll_row应该用 div 和 class = poll_row 更改位置，并更改 +1 或 -1 上隐藏字段的值属性

具有以下功能：

资产/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());
  });

点击按钮改变隐藏标签的值。

但是只有双击一个按钮方块才会反转。我不明白是什么原因导致我第一次点击时没有任何反应

哪里错了？

polls/edit.html.haml

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

polls/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>

标记中存在一些差异，仅供演示之用。

如何使用 jQuery 交换方块？

How to swap the blocks using jQuery?

javascript

jquery

ruby-on-rails

haml