Question

我正在编写一个脚本，只需点击一下按钮就可以上下移动列表元素。

我可以使用jQuery，但我在使用纯（vanilla）JavaScript编写这个问题时遇到了麻烦。

＆＃13;

$(function() {
  $('.up').on('click', function(e) {
    var wrapper = $(this).closest('li')
    wrapper.insertBefore(wrapper.prev())
  })
  $('.down').on('click', function(e) {
    var wrapper = $(this).closest('li')
    wrapper.insertAfter(wrapper.next())
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>1 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
  <li>2 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
  <li>3 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
  <li>4 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
  <li>5 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
  <li>6 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
</ul>

＆＃13;

如何在纯JavaScript中执行相同操作？

Answer 1

希望这会有所帮助：

window.onload = function () {
	var upLink = document.querySelectorAll(".up");

	for (var i = 0; i < upLink.length; i++) {
		upLink[i].addEventListener('click', function () {
			var wrapper = this.parentElement;

			if (wrapper.previousElementSibling)
			    wrapper.parentNode.insertBefore(wrapper, wrapper.previousElementSibling);
		});
	}

	var downLink = document.querySelectorAll(".down");

	for (var i = 0; i < downLink.length; i++) {
		downLink[i].addEventListener('click', function () {
			var wrapper = this.parentElement;

			if (wrapper.nextElementSibling)
			    wrapper.parentNode.insertBefore(wrapper.nextElementSibling, wrapper);
		});
	}
}

<ul>
	<li>1 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
	<li>2 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
	<li>3 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
	<li>4 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
	<li>5 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
	<li>6 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
</ul>

Answer 2

您可以使用以下代码

`function listbox_move（listID，direction）{

var listbox = document.getElementById(listID);
var selIndex = listbox.selectedIndex;

if(-1 == selIndex) {
    alert("Please select an option to move.");
    return;
}

var increment = -1;
if(direction == 'up')
    increment = -1;
else
    increment = 1;

if((selIndex + increment) < 0 ||
    (selIndex + increment) > (listbox.options.length-1)) {
    return;
}

var selValue = listbox.options[selIndex].value;
var selText = listbox.options[selIndex].text;
listbox.options[selIndex].value = listbox.options[selIndex + increment].value
listbox.options[selIndex].text = listbox.options[selIndex + increment].text

listbox.options[selIndex + increment].value = selValue;
listbox.options[selIndex + increment].text = selText;

listbox.selectedIndex = selIndex + increment;

}`

Refrerence Example

JavaScript：在列表中上下移动元素

2 个答案: