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

Question

I am trying to implement up and down arrow buttons for a list in HTML. the up arrow moves the selected element of list upwards and the down arrow moves the selected list element downwards. I tried this code, but not working ::

 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> 

The $(something).click query executes when you click on that something. So it doesn't make sense to put into a function. You want it to trigger some function execution. I added the dnode var to keep the scope of the node since this is no longer attached to the node when you call reorder node. So I substituted this with dnode and it works fine. Here is the fully working code :

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;
}

You can remove the onclik attribute from html. It is not needed

About the add to result function: There is no element with the moselect id, so moname is null and the compiler gives an error. Next, you never call it so it will never execute. You should add a loop somewhere to add the elements. You don't need to set attribute onclick , just use a jquery selector.I added set attribute id to pass it to select function. By the way, I don't see give_id function anywhere so I created a function to select the node to be moved

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

Your jQuery click event listeners are added after the click event happens so they are never handled, on the click event you are just binding the click handler. Move the $().click outside of the onclick and since you are using jQuery selectors for the buttons you can get rid on 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>