標籤：
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><script type="text/javascript" src="../../popwindow/jquery-1.11.2.min.js"></script><style type="text/css">.t{ width:100%; text-align:center ; top:10px; height:130px; background:#00C;}.left{ width:40%; top:150px; height:500px; background:#C69; position:absolute; left:0px; }.middle{ width:20%; top:150px; height:500px; background:#CF0; position:absolute; left:40%;}.right{ width:40%; top:150px; height:500px; background:#C69; position:absolute; right:0px; }.leftb{ width:70%; height:500px; left:15%; position:absolute;}.rightb{ width:70%; height:500px; right:15%; position:absolute;}.le{ margin-top:5px; width:100%; text-align:center ; background:#3F0;}.ri{ margin-top:5px; width:100%; text-align:center ; background:#3F0;}.btn1{ top:200px; width:70%; height:30px; text-align:center; left:15%; position:absolute; background:#F30; }.btn2{ bottom:200px; width:70%; height:30px; text-align:center; left:15%; position:absolute; background:#F30;}</style></head><body><div class="t"><h1>添加列表</h1></div><div class="left"><div class="leftb"><div class="le">皇馬</div><div class="le">曼聯</div><div class="le">米蘭</div></div></div><div class="middle"><div class="btn1">>></div><div class="btn2">></div></div><div class="right"><div class="rightb"><script type="text/javascript">$(document).ready(function(e) { //滑鼠選中 //滑鼠點擊選中事件 $(".le").click(function(e) { //初始化 $(".le").css("background","#3F0") $(".le").attr("cz","0")//委任標記 //選中的樣式 $(this).css("background","#FFF") $(this).attr("cz","1")//變更標記 }); //點擊中間按鈕移動到右側中 $(".btn1").click(function(e) { var mz= $(".le")//將所有名字存到名字mz中 for (var i=0;i<mz.length;i++)//尋找 { //判斷選中項 if (mz.eq(i).attr("cz")=="1")//eq()判斷cz標籤是否是選中標籤1 { var zhi= mz.eq(i).text()//將選中的值放入zhi中 //判斷該值是否存在 if (Has(zhi)) { var str="<div class=‘ri‘>"+zhi+"</div>";//將值zhi內容拼成div輸出字串 $(".rightb").append(str);//將要輸出的div拼到右側視窗中 } } } }); //全選移動 $(".btn2").click(function(e) { //左側全部顯示選中狀態 $(".le").css("background","#FFF") //將所有名字存入值中 var list=$(".le") //迴圈添加 for (var i=0; i<list.length;i++) { var zhi= list.eq(i).text() if(Has(zhi))//去重 { var str="<div class=‘ri‘>"+zhi+"</div>";//將值zhi內容拼成div輸出字串 $(".rightb").append(str);//將要輸出的div拼到右側視窗中 } } }); });function Has(zhi)//判斷是否重複{ var list=$(".ri"); var isok=true; for (var i=0;i<list.length;i++) { if (list.eq(i).text()==zhi) { isok=false; break; } } return isok; }</script>
jQuery練習二球隊移動
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
