如何使用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>