如何使用javascript中的向上和向下箭头键在列表中移动所选项目？

Question

我正在尝试为HTML列表实现上下箭头按钮。 向上箭头将所选列表元素向上移动，而向下箭头则将所选列表元素向下移动。 我尝试了这段代码，但无法正常工作::

 function reorder_up(node) { $(".go_up").click(function() { var $current = $(this).closest('li') var $previous = $current.prev('li'); if ($previous.length !== 0) { $current.insertBefore($previous); } return false; }); } function reorder_down(node) { $(".go_down").click(function() { var $current = $(this).closest('li') var $next = $current.next('li'); if ($next.length !== 0) { $current.insertAfter($next); } return false; }); } // for adding to the result page i am using this function, where i am creating a list dynamically and provinding the id to the selected element when clicking on it. I need to move up - down in the result section of the list :: function add_to_result() { //var moparent = document.getElementById("parent").innerHTML; var moname = document.getElementById("moselect").innerHTML; var node = document.createElement('LI'); node.setAttribute('onclick', 'giveid_Result(this)'); node.setAttribute('ondblclick', 'fillprops()'); var text = document.createTextNode(moname); node.appendChild(text); document.getElementById("result").appendChild(node); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button type="button" class='go_up' onclick="reorder_up(this)" style="height:40px;width:40px">&uarr;</button> <button type="button" class='go_down' onclick="reorder_down(this)" style="height:40px;width:40px">&uarr;</button> <div id="results"> <div class="boxheader"> <STRONG>RESULTS</STRONG> </div> <div class="boxcontent"> <ul id="result"> </ul> </div> </div> 

Answer 1

 var selected; for(var x=0;x<5;x++){ addToResult("Node:"+x); } $("li").click(function(){ console.log("pressing"+$(this).attr("id")); select($(this)) }); $(".go_up").click(function(){reorder_up(selected)}); $(".go_down").click(function(){reorder_down(selected)}); function reorder_up(node) { var dnode=node; console.log("RUP"); var $current = $(dnode).closest('li') $current.css("background-color","blue"); var $previous = $current.prev('li'); $previous.css("background-color","yellow"); if ($previous.length !== 0) { $current.insertBefore($previous); } return false; } function reorder_down(node) { console.log("RDO"); var dnode=node; var $current = $(dnode).closest('li') $current.css("background-color","blue"); var $next = $current.next('li'); $next.css("background-color","yellow"); if ($next.length !== 0) { $current.insertAfter($next); } return false; } // for adding to the result page i am using this function, where i //am creating a list dynamically and provinding the id to the selected //element when clicking on it. I need to move up - down in the result section of the list // :: function addToResult(id) { var node = document.createElement('li'); node.setAttribute('id',id); // node.setAttribute('onclick', 'select(id)'); node.setAttribute('ondblclick', 'fillprops()'); var text = document.createTextNode(id); node.appendChild(text); document.getElementById("result").appendChild(node); } function select(selector){ selector.css("background-color","green"); console.log("youre pressing"+selector.attr("id")); selected=selector; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button" class='go_up' style="height:40px;width:40px">&uarr;</button> <button type="button" class='go_down' style="height:40px;width:40px">&darr;</button> <div id="results"> <div class="boxheader"> <STRONG>RESULTS</STRONG> </div> <div class="boxcontent"> <ul id="result"> </ul> </div> </div> 

$（something）.click查询在单击某事物时执行。 因此，放入一个函数没有任何意义。 您希望它触发一些函数执行。 我添加了dnode var来保留节点的范围，因为在您调用reorder节点时，该节点不再附加到该节点。 所以我用dnode代替了它 ，并且工作正常。 这是完整的工作代码 ：

使用Javascript：

for(var x=0;x<5;x++){
    add_to_result("Node"+x);
}
$("li").click(function(){      
   select($(this))
 });

$(".go_up").click(function() {
 reorder_up(selectedNode);
  });

  $(".go_down").click(function() {
      reorder_up(selectedNode);
  });

    function reorder_up(node) {
    var dnode=node;
    var $current = $(dnode).closest('li')
    var $previous = $current.prev('li');
    if ($previous.length !== 0) {
      $current.insertBefore($previous);
    }
    return false;

}


function reorder_down(node) {
    var dnode=node;
    var $current = $(node).closest('li')
    var $next = $current.next('li');
    if ($next.length !== 0) {
      $current.insertAfter($next);
    }
    return false;
}

您可以从html删除onclik属性。 不需要

关于添加到结果函数：没有带有moselect id的元素，因此moname为null，编译器给出了错误。 接下来，您永远不会调用它，因此它将永远不会执行。 您应该在某处添加一个循环以添加元素。 您不需要设置属性onclick ，只需使用一个jquery选择器即可。我添加了set属性id来将其传递给select函数。 顺便说一下，我在任何地方都看不到Give_id函数，所以我创建了一个函数来选择要移动的节点

function add_to_result(id) {  
  var node = document.createElement('li');
  node.setAttribute('id',id);
  node.setAttribute('ondblclick', 'fillprops()');
  var text = document.createTextNode(id);
  node.appendChild(text);
  document.getElementById("result").appendChild(node);
}
function select(selector){
  selector.css("background-color","green");
  console.log("youre pressing"+selector.attr("id"));
  selected=selector;
}

Answer 2

您的jQuery click事件监听器是在click事件发生后添加的，因此它们永远不会被处理，在click事件上，您只是绑定了click处理程序。 将$().click onclick之外，由于您使用jQuery选择器作为按钮，因此可以摆脱onclick

 $(".go_up").click(function() { var $current = $(this).closest('li') var $previous = $current.prev('li'); if ($previous.length !== 0) { $current.insertBefore($previous); } return false; }); $(".go_down").click(function() { var $current = $(this).closest('li') var $next = $current.next('li'); if ($next.length !== 0) { $current.insertAfter($next); } return false; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button type="button" class='go_up' style="height:40px;width:40px">&uarr;</button> <button type="button" class='go_down' style="height:40px;width:40px">&uarr;</button> <div id="results"> <div class="boxheader"> <STRONG>RESULTS</STRONG> </div> <div class="boxcontent"> <ul id="result"> </ul> </div> </div>