分别单击向上和向下按钮时，可以互换多个向上和向下 [英] Interchanging multiple up and down when clicked up and down buttons respectively
本文介绍了分别单击向上和向下按钮时，可以互换多个向上和向下的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
嗨 我的页面中有多个< div>标记，我只想将< div>的位置移动到单击UP按钮时向上移动.例如id，单击UP按钮时div的位置从顶部开始为10，其位置应为第9个，第9个div应出现在第10个位置.类似于DOWN按钮. div class ="h2_lin">解决方案
一次检查一次
< html xmlns =" > < 头 =" 服务器" < 标题 > < /title > < 脚本 =" Scripts/jquery-1.4.1-vsdoc.js" span> 类型 =" 文本/javascript" < / 脚本 > < 脚本 =" Scripts/jquery-1.4.1.js" 类型 =" > < / > < 脚本 =" javascript" 功能 moveup(tid){ var len = 文档 .getElementById(" maindiv").childNodes.length; var w; for ( var y = 0 ; y < parseInt (len); y ++){ 如果(文档 .getElementById(" maindiv").childNodes [y] .innerHTML == 功能 chang(g){ 如果( parseInt (g)> 1 ){ var fg = 文档 .getElementById(" maindiv").childNodes [g] .innerHTML; 文档 .getElementById(" ) .childNodes [g] .innerHTML = 文档 .getElementById(" maindiv").childNodes [ 2 ].innerHTML; 文档 .getElementById(" ) .childNodes [ parseInt (g)- 2 ].innerHTML = fg; } } < / 脚本 > < 样式 =" text/css" maindiv { 高度 : 497px; } </ 样式 > < /head > < 正文 < 表单 =" form1" runat >服务器" > < div =" maindiv" < div =" Div1" 样式 背景颜色:黑色；颜色:红色；宽度:400像素；高度:100像素；" > < 输入 =" id =" btnup" 值 =" onclick moveup(此.parentNode.id)" > < br > 这是第一内容 < /div > < br > < div =" Div2" 样式 背景颜色:黑色；颜色:红色；宽度:400像素；高度:100像素；" > < 输入 =" id =" Button1" 值 =" onclick moveup(此.parentNode.id)" > < br > 这是第二个内容 < /div > < br > < div =" Div3" 样式 背景颜色:黑色；颜色:红色；宽度:400像素；高度:100像素；" > < 输入 =" id =" Button2" 值 =" onclick moveup(此.parentNode.id)" > < br > 这是第三部分内容 < /div > < br > < div =" Div4" 样式 背景颜色:黑色；颜色:红色；宽度:400像素；高度:100像素；" > < 输入 =" id =" Button3" 值 =" onclick moveup(此.parentNode.id)" > < br > 这是第四内容 < /div > < /div > < br > < /form > < /body > < /html >
最好的
只需检查一次即可满足您的要求.
将光标放在文本框中，然后向上和向下按下按钮，您将看到所需的输出.
< html xmlns =" > < 头 =" 服务器" < 标题 > < /title > < 脚本 =" Scripts/jquery-1.4.1-vsdoc.js" span> 类型 =" 文本/javascript" < / 脚本 > < 脚本 =" =" span> 类型 =" 文本/javascript" < / 脚本 > < 脚本 语言 =" javascript" > 功能 f1(){ //
(#resdiv").append(< span onmouseenter ="f2(this)" onmouseout ="f3(this)" style ="width:318px;"> hello</span>< br/>< span onmouseenter ="f2(this)" onmouseout = "f3(this)" style ="width:318px;"> sdfsdfsdfsdf</span>< br/>< span onmouseenter ="f2(this)" onmouseout ="f3(this)" style ="width :318px;> sdfsdf</span>"); } 功能 f2(tid){ tid.style.backgroundColor = " ; tid.style.color = " ; } 功能 f3(tid){ tid.style.backgroundColor = " ; tid.style.color = " ; } var tmp = -1; 功能 f4(){ var len = 文档 .getElementById(" parntdiv").childNodes.length; 如果( parseInt (event.keyCode)== 40 ){ // 向下 如果( parseInt (tmp)== parseInt (len)-1){ tmp = 0 ; } 其他 { tmp = parseInt (tmp)+ 1 ; } } 如果( parseInt (event.keyCode)== 38 ){ // 上 如果( parseInt (tmp)< = 0 ){ tmp = parseInt (len)- 1 ; } 其他 { tmp = parseInt (tmp)- 1 ; } } fq(); } 函数 fq(){ var len = 文档 .getElementById(" parntdiv").childNodes.length; 如果( parseInt (tmp)！= parseInt (len)- 1 ){ f3(文档 .getElementById(" ).childNodes [ parseInt (tmp)+ 1 ]))； } 如果( parseInt (tmp)== parseInt (len)- 1 ){ f3(文档 .getElementById(" ).childNodes [ 0 ]))； } f2(文档 .getElementById(" ).childNodes [ parseInt (tmp)])； 文档 .getElementById(" ) .innerText = 文档 .getElementById(" . span>).childNodes [ parseInt (tmp)].innerText; 如果( parseInt (tmp)> 0 ){ f3(文档 .getElementById(" ).childNodes [ parseInt (tmp)- 1 ]))； } 如果( parseInt (tmp)== 0 || parseInt (tmp)== -1){ f3(文档 .getElementById(" ).childNodes [ parseInt (len)- 1 ])； } } < / 脚本 > < 样式 =" text/css" txtsearch { 宽度 : 318px; } </ 样式 > < /head > < 正文 > < 表单 =" form1" runat >服务器" > < div =" dfsdf" < 输入 =" id =" txtsearch" onkeyup =" =" f4()" / > < br / > < div =" parntdiv" 样式 宽度:318px ; background-color:Black; color:White;" < div =" child1" onmouseenter f2(this )" onmouseout f3(this)" ">< /div > < div =" child2" onmouseenter f2(this )" onmouseout f3(this)" ">< /div > < div =" child3" onmouseenter f2(this )" onmouseout f3(this)" ">< /div > < div =" child4" onmouseenter f2(this )" onmouseout f3(this)" ">< /div > < div =" child5" onmouseenter f2(this )" onmouseout f3(this)" ">< /div > < div =" child6" onmouseenter f2(this )" onmouseout f3(this)" ">< /div > < /div > < br > < div =" resdiv" 样式 宽度:318px ; background-color:Black; color:White;" < /div > < /div > < /form > < /body > < /html >
在上面的代码中，您可以为正常的向上和向下击键设置这些事件.
希望您能理解我的所作所为.
最好的
Hi There are multiple <div>tags in my page, i just want to move position of a <div> up when UP button is clicked.for example id the position of the div is 10 from top when UP button is clicked its position should be 9th and the 9th div should appear at the 10th position.similarly for DOWN button.Can anyone help me
解决方案
Hi,
check this once
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script language="javascript"> function moveup(tid) { var len = document.getElementById("maindiv").childNodes.length; var w; for (var y = 0; y < parseInt(len); y++) { if (document.getElementById("maindiv").childNodes[y].innerHTML == document.getElementById(tid).innerHTML) { w = y; } } chang(w); } function chang(g) { if (parseInt(g) > 1) { var fg = document.getElementById("maindiv").childNodes[g].innerHTML; document.getElementById("maindiv").childNodes[g].innerHTML = document.getElementById("maindiv").childNodes[parseInt(g) - 2].innerHTML; document.getElementById("maindiv").childNodes[parseInt(g) - 2].innerHTML = fg; } } </script> <style type="text/css"> #maindiv { height: 497px; } </style> </head> <body > <form id="form1" runat="server"> <div id="maindiv"> <div id="Div1" style=" background-color :Black; color :Red; width:400px; height :100px;"> <input type ="button" id="btnup" value ="UP" onclick="moveup(this.parentNode.id)" /> <br /> This is first content </div><br /> <div id="Div2" style=" background-color :Black; color :Red; width:400px; height :100px;"> <input type ="button" id="Button1" value ="UP" onclick="moveup(this.parentNode.id)" /> <br /> This is second content </div><br /> <div id="Div3" style=" background-color :Black; color :Red; width:400px; height :100px;"> <input type ="button" id="Button2" value ="UP" onclick="moveup(this.parentNode.id)" /> <br /> This is third content </div><br /> <div id="Div4" style=" background-color :Black; color :Red; width:400px; height :100px;"> <input type ="button" id="Button3" value ="UP" onclick="moveup(this.parentNode.id)" /> <br /> This is fourth content </div> </div> <br /> </form> </body> </html>
All the Best
Hi,
just check this once for your requirement.
place your cursor in textbox then press buttons up and down you''ll see your required output.
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script language ="javascript" > function f1() { //
("#resdiv").append("<span onmouseenter="f2(this)" onmouseout="f3(this)" style="width:318px;">hello</span><br /><span onmouseenter="f2(this)" onmouseout="f3(this)" style="width:318px;">sdfsdfsdfsdf</span><br /><span onmouseenter="f2(this)" onmouseout="f3(this)" style="width:318px;">sdfsdf</span>"); } function f2(tid) { tid.style.backgroundColor = "White"; tid.style.color = "red"; } function f3(tid) { tid.style.backgroundColor = ""; tid.style.color = ""; } var tmp = -1; function f4() { var len = document.getElementById("parntdiv").childNodes.length; if (parseInt(event.keyCode) == 40) { //down if (parseInt(tmp) ==parseInt(len)-1) { tmp = 0; } else { tmp = parseInt(tmp) + 1; } } if (parseInt(event.keyCode) == 38) { //up if (parseInt(tmp) <= 0) { tmp = parseInt(len) - 1; } else { tmp = parseInt(tmp) - 1; } } fq(); } function fq() { var len = document.getElementById("parntdiv").childNodes.length; if (parseInt(tmp) != parseInt(len) - 1) { f3(document.getElementById("parntdiv").childNodes[parseInt(tmp) + 1]); } if (parseInt(tmp) == parseInt(len) - 1) { f3(document.getElementById("parntdiv").childNodes[0]); } f2(document.getElementById("parntdiv").childNodes[parseInt(tmp)]); document.getElementById("txtsearch").innerText = document.getElementById("parntdiv").childNodes[parseInt(tmp)].innerText; if (parseInt(tmp) > 0) { f3(document.getElementById("parntdiv").childNodes[parseInt(tmp) - 1]); } if (parseInt(tmp) == 0 || parseInt(tmp) == -1) { f3(document.getElementById("parntdiv").childNodes[parseInt(len) - 1]); } } </script> <style type="text/css"> #txtsearch { width: 318px; } </style> </head> <body> <form id="form1" runat="server"> <div id="dfsdf"> <input type ="text" id="txtsearch" onkeyup="f1()" onkeydown="f4()" /><br /> <div id="parntdiv" style=" width:318px; background-color :Black ; color:White;"> <div id="child1" onmouseenter="f2(this)" onmouseout="f3(this)">child one</div> <div id="child2" onmouseenter="f2(this)" onmouseout="f3(this)">child two</div> <div id="child3" onmouseenter="f2(this)" onmouseout="f3(this)">child three</div> <div id="child4" onmouseenter="f2(this)" onmouseout="f3(this)">child four</div> <div id="child5" onmouseenter="f2(this)" onmouseout="f3(this)">child five</div> <div id="child6" onmouseenter="f2(this)" onmouseout="f3(this)">child six</div> </div> <br /> <div id="resdiv" style=" width:318px; background-color :Black ; color:White;"></div> </div> </form> </body> </html>
In the above code you can set those events for normal up and down keystrokes.
I hope you''ll understood what I did.
All the Best
这篇关于分别单击向上和向下按钮时，可以互换多个向上和向下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
