jquery - 如何在 jQuery 中单击相应按钮后向上或向下移动 li 项目？

Question

这就是我正在解决的问题

网站需要一个列表，用户可以在其中对他们最喜欢的食物进行排名。编写设置函数，该函数应在所有 Up! 上注册点击处理程序。和下来!纽扣。向上!按钮应将列表项在列表中向上移动一位，而向下!按钮应将列表项在列表中向下移动一位。

例如，考虑以下代码:

document.body.innerHTML = `<ol>
  <li><button>Up!</button>Taco<button>Down!</button></li>
  <li><button>Up!</button>Pizza<button>Down!</button></li>
  <li><button>Up!</button>Eggs<button>Down!</button></li>
</ol>`;

setup();

如果按钮向上!单击 Pizza 列表项中的按钮，Pizza 应为列表中的第一项，而 Taco 应为第二项。

这是我迄今为止尝试过的:

function setup() {
  $.fn.moveUp = function() {
    before = $(this).prev();
    $(this).insertBefore(before)
  }

  $.fn.moveDown = function() {
    after=$(this).next();
    $(this).insertAfter(after)
  }

  $('li').find("button:contains('Up!')").click(function() {
    $(this).moveUp()
  })

  $('li').find("button:contains('Down!')").click(function() {
    $(this).moveDown()
  })
}

我认为创建 moveUp() 和 moveDown() 可以完成工作，但我在这里遗漏了一些东西

Answer 1

示例:https://jsfiddle.net/xhfo3qty/

看起来您正在操作错误的元素。尝试为您的按钮类提供更好的监听器性能，并在回调中使用 .parent() 方法。我已经给出了按钮类，因为作为偏好，我不喜欢使用 find。我更喜欢使用直接选择器，但这不是必需的。

<ol>
  <li><button class="up">Up!</button>Taco<button class="down">Down!</button> </li>
  <li><button class="up">Up!</button>Pizza<button class="down">Down!</button></li>
  <li><button class="up">Up!</button>Eggs<button class="down">Down!</button></li>
</ol>


$.fn.moveUp = function() {
  before = $(this).prev();
  $(this).insertBefore(before)
}

$.fn.moveDown = function() {
  after=$(this).next();
  $(this).insertAfter(after)
}

$('.up').click(function() {
  $(this).parent().moveUp()
})

$('.down').click(function() {
  $(this).parent().moveDown()
})