JS-Methode zum Implementieren von Klicken zum Auf- und Abbewegen der LI-Reihe data_javascript-Fähigkeiten-js-Tutorial-php.cn

JS-Methode zum Implementieren von Klicken zum Auf- und Abbewegen der LI-Reihe data_javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:46:55

Original

1585 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Methode, mit JS LI-Datenzeilen durch Klicken nach oben und unten zu verschieben. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier ist eine Demonstration der JavaScript-Sortierfunktion. Klicken Sie auf die Schaltfläche, um die Daten nach oben und unten zu verschieben. Die obere Gruppe verwendet die Pfeilsymbolsteuerung, die schöner ist Treffen Sie direkt Ihre eigene Wahl. myList ist der ID-Wert von ul, m ist 0 zum Anzeigen von Text, m ist 1 zum Anzeigen von Bildern, mO und mT sind Text- oder Bildinhalte.

Der Demonstrationseffekt ist wie folgt:

Der spezifische Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>JS移动li行数据，点击上移下移</title>
<style type="text/css">
 * {
  padding:0;
  margin:0;
 }
 .content {width:500px;margin:20px auto;}
 #pCon {width:500px;list-style:none;}
 #pCon li {height:20px;display:block;border-bottom:1px #ccc solid;}
 #pCon li a{margin-left:5px;text-decoration:none;}
 #pCon li a:hover{cursor:hand;}
 .context {float:left;display:inline;}
 .control {float:right;display:inline;}
 .control img {width:50px;height:12px;overflow:hidden;float:left;display:inline;}
 hr {margin:30px auto;}
 #pCon1 {width:500px;list-style:none;}
 #pCon1 li {height:20px;display:block;border-bottom:1px #ccc solid;}
 #pCon1 li a{margin-left:5px;text-decoration:none;}
 #pCon1 li a:hover{cursor:hand;}
</style>
</head>
<body>
<div class="content">
<ul id="pCon">
<li><div class="context">点击右侧箭头上移下移A</div></li>
<li><div class="context">点击右侧箭头上移下移B</div></li>
<li><div class="context">点击右侧箭头上移下移C</div></li></ul>
<hr/>
<ul id="pCon1">
<li><div class="context">测试数据你相信么A</div></li>
<li><div class="context">测试数据你相信么B</div></li>
<li><div class="context">测试数据你相信么C</div></li>
</ul>
</div>
<script>
function moveSonU(tag,pc){
 var tagPre=get_previoussibling(tag);
 var t=document.getElementById(pc);
 if(tagPre!=undefined){
  t.insertBefore(tag,tagPre);
 }
}
function moveSonD(tag){
 var tagNext=get_nextsibling(tag);
 if(tagNext!=undefined){
  insertAfter(tag,tagNext);
 }
}
function get_previoussibling(n){
 if(n.previousSibling!=null){
  var x=n.previousSibling;
  while (x.nodeType!=1)
  {
   x=x.previousSibling;
  }
  return x;
 }
}
function get_nextsibling(n){
 if(n.nextSibling!=null){
  var x=n.nextSibling;
  while (x.nodeType!=1)
  {
   x=x.nextSibling;
  }
  return x;
 }
}
function insertAfter(newElement,targetElement){
 var parent=targetElement.parentNode;
 if(parent.lastChild==targetElement){
  parent.appendChild(newElement);
 }else{
  parent.insertBefore(newElement,targetElement.nextSibling);
 }
}
function myOrder(myList,m,mO,mT){
//myList为ul的id值，m为0显示文字，m为1显示图片，mO、mT为文字或图片内容
 var pCon=document.getElementById(myList);
 var pSon=pCon.getElementsByTagName("li");
 for(i=0;i<pSon.length;i++){
  var conTemp=document.createElement("div");
  conTemp.setAttribute("class","control");
  var clickUp=document.createElement("a");
  var clickDown=document.createElement("a");
  if(m==0){
  var upCon=document.createTextNode(mO);
  var downCon=document.createTextNode(mT);
  }else{
  var upCon=document.createElement("img");
  var downCon=document.createElement("img");
  upCon.setAttribute("src",mO);
  downCon.setAttribute("src",mT);
  }
  clickUp.appendChild(upCon);
  clickUp.setAttribute("href","#");
  clickDown.appendChild(downCon);
  clickDown.setAttribute("href","#");
  pSon[i].appendChild(conTemp);
  conTemp.appendChild(clickUp);
  conTemp.appendChild(clickDown);
  clickUp.onclick=function(){
   moveSonU(this.parentNode.parentNode,myList);
  }
  clickDown.onclick=function(){
   moveSonD(this.parentNode.parentNode);
  }
 }
}
myOrder("pCon",1,"http://files.jb51.net/file_images/article/201508/201585153341254.png&#63;201575153424","http://files.jb51.net/file_images/article/201508/201585153353977.png&#63;20157515349");
myOrder("pCon1",0,"上移","下移");
</script>
</body>
</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.