Question

我正在尝试制作一个列表，只需按一下按钮，每行就可以上下移动。

我在按钮上使用onclick方法，并将'this'作为参数。

当页面加载时，只需点击几下即可触发事件。

之后需要1到3次点击。

为什么？

<!doctype html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">    

    <title>Schedule</title>
</head>
<body>
<div id="eXes">
  <div class="eX">
    1
    <button class="up" onclick="moveUp(this)">up</button>
    <button class="down" onclick="moveDown(this)">down</button>
  </div>
  <div class="eX">
    2
    <button class="up" onclick="moveUp(this)">up</button>
    <button class="down" onclick="moveDown(this)">down</button>
  </div>
  <div class="eX">
    3
    <button class="up" onclick="moveUp(this)">up</button>
    <button class="down" onclick="moveDown(this)">down</button>
  </div>
</div>

<script type="text/javascript">
    function moveUp(el) {
        var selected = el.parentNode;
        var previous = el.parentNode.previousSibling;
        document.getElementById("eXes").insertBefore(selected, previous);
    }
</script>
<script type="text/javascript">
    function moveDown(el) {
        var selected = el.parentNode;
        var next = el.parentNode.nextSibling;
        document.getElementById("eXes").insertBefore(selected, next.nextSibling);
    }
</script>
</body>
</html>

直播代码https://www.w3schools.com/code/tryit.asp?filename=FIAIQO31H90L

Answer 1

你的问题是你们每个人之间的空白区域。浏览器将其视为textNode，因此当您最初向上或向下移动元素时，实际上只是将其与空格交换。一旦您上下2-3次点击，您就可以有效地排序＆＃39; dom堆栈底部的空白区域然后你不再看到问题。

快速解决方法是通过更改标记来删除空白区域，以便立即关闭并打开div，而不是在新行上打开。

您可以在此处详细了解空白区域：https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM

Answer 2

如果你使用console.log el.parentNode.previousSilbing，你会看到你有一个＆＃39; nextLine＆＃39;在每个div之间的el，所以简单地删除它将起作用，但使html看起来很难看。

＆＃13;

<!doctype html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
  	
	<title>Rota Schedule</title>
</head>
<body>
<div id="eXes">
  <div id='1' class="eX">
    1
    <button class="up" onclick="moveUp(this)">up</button>
    <button class="down" onclick="moveDown(this)">down</button>
  </div><div div id='2'  class="eX">
    2
    <button class="up" onclick="moveUp(this)">up</button>
    <button class="down" onclick="moveDown(this)">down</button>
  </div><div div id='3' class="eX">
    3
    <button class="up" onclick="moveUp(this)">up</button>
    <button class="down" onclick="moveDown(this)">down</button>
  </div>
</div>

<script type="text/javascript">
	function moveUp(el) {
    console.log('click',el.parentNode,el.parentNode.previousSibling)
		var selected = el.parentNode;
		var previous = el.parentNode.previousSibling;
		document.getElementById("eXes").insertBefore(selected, previous);
	}
</script>
<script type="text/javascript">
	function moveDown(el) {
		var selected = el.parentNode;
		var next = el.parentNode.nextSibling;
		document.getElementById("eXes").insertBefore(selected, next.nextSibling);
	}
</script>
</body>
</html>

＆＃13;

Answer 3

previsousSibling和nextSibling返回前一个或后一个兄弟。在您的情况下，每个

之间都有一个换行符

<div class="eX">
1
<button class="up" onclick="moveUp(this)">up</button>
<button class="down" onclick="moveDown(this)">down</button>
</div><div class="eX">
 2
<button class="up" onclick="moveUp(this)">up</button>
<button class="down" onclick="moveDown(this)">down</button>
</div><div class="eX">
 3
<button class="up" onclick="moveUp(this)">up</button>
<button class="down" onclick="moveDown(this)">down</button>
</div>

因此，如果你使用console.log（之前的版本），你的结果将是Text而不是元素。

如果你这样做，你的问题就会解决

function previousElementSibling( elem ) {

do {

    elem = elem.previousSibling;

} while ( elem && elem.nodeType !== 1 );

return elem;
}

function nextElementSibling( elem ) {

do {

    elem = elem.nextSibling;

} while ( elem && elem.nodeType !== 1 );

return elem;
}

但这会使您的代码可见性最差。

你应该做的是使用函数来获得好的元素。在您的情况下，您必须通过

替换previsousSibling和nextSibing

var express = require('express')
var multer  = require('multer')
var upload = multer({ dest: 'uploads/' })

var app = express()

app.post('/profile', upload.single('avatar'), function (req, res, next) {

})

Answer 4

尝试以下操作，我会在按钮的每个向下或向上移除onClick事件，并且我将使用Arrary.prototype和forEach来选择元素：

＆＃13;

Array.prototype.slice.apply(document.querySelectorAll('.up')).forEach(function (el){
el.addEventListener('click',function(){

 var selected = el.parentNode,
     previous = el.parentNode.previousSibling;
       document.getElementById("eXes").insertBefore(selected, previous);

});
});
Array.prototype.slice.apply(document.querySelectorAll('.down')).forEach(function (el){
el.addEventListener('click',function(){

var selected = el.parentNode,
    next = el.parentNode.nextSibling;
if(next == undefined){
next =  document.getElementById("eXes").firstChild;
}    document.getElementById("eXes").insertBefore(selected, next.nextSibling);
        
});
});

＆＃13;

<div id="eXes">
  <div class="eX">
    1
    <button class="up">up</button>
    <button class="down">down</button>
  </div>
  <div class="eX">
    2
    <button class="up">up</button>
    <button class="down">down</button>
  </div>
  <div class="eX">
    3
    <button class="up">up</button>
    <button class="down">down</button>
  </div>
</div>

＆＃13;

<强>的ForEach

foreach函数在数组中执行一次回调函数，访问此链接以获取更多信息： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

onclick不会在第一次点击，可排序列表，JavaScript

4 个答案: