如何使用 jQuery 交换块？

Posted 2023-05-09

【中文标题】如何使用 jQuery 交换块？

【英文标题】：How to swap the blocks using jQuery?

【发布时间】：2016-06-17 22:15:57

【问题描述】：

通过点击“向上”或“向下”按钮，块 div with class= poll_row 应该用更早或更晚的方式改变位置 div with class= poll_row 并改变+1 或 -1 上隐藏字段的 value 属性

具有以下功能：

资产/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
.................................................

民意调查/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' 

【参考方案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>

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