Question

我正在尝试为HTML中的列表实现向上和向下箭头按钮。向上箭头向上移动列表的选定元素，向下箭头向下移动选定的列表元素。我试过这段代码，但没有工作::

CV_FOURCC(...)

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

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

单击该内容时会执行$（某事）.click查询。因此放入一个函数是没有意义的。您希望它触发某些功能执行。我添加了dnode var以保持节点的范围，因为当您调用reorder节点时，它不再附加到节点。所以我用 dnode 替换了这个，它运行正常。这是完全有效的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;
}

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

关于添加到结果函数：没有带 moselect id的元素，因此 moname 为空，编译器会出错。接下来，你永远不会调用它，所以它永远不会执行。你应该在某处添加一个循环来添加元素。您不需要设置属性 onclick ，只需使用jquery即可 selector.I添加了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移到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>

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

2 个答案: