<!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="0621popwindow/jquery-1.11.2.min.js"></script> </head> <style type="text/css"> *{margin: 10px auto auto 32px; } .wk{width: 1100px;height: 400px; background-color: #2effff;} .zl{width: 200px;height: 30px;background-color: #d4ff19;border: 2px red solid; font-family: "楷体";text-align: center;vertical-align: middle;font-size: 25px; top: 30px; } .zl2{width: 200px;height: 30px;background-color: #d4ff19;border: 2px red solid; font-family: "楷体";text-align: center;vertical-align: middle;font-size: 25px; top: 30px; } .middle1{width: 130px;height: 60px; left: 370px;top: 60px;border: 2px mediumvioletred solid;position: absolute; font-family: "黑体";text-align: center;vertical-align: middle;font-size: 25px;} .middle2{width: 130px;height: 60px; left: 370px;top: 160px;border: 2px mediumvioletred solid;position: absolute; font-family: "黑体";text-align: center;vertical-align: middle;font-size: 25px;} .jieshou{width: 200px;height: 30px;background-color: #d4ff19;border: 2px red solid; font-family: "楷体";text-align: center;vertical-align: middle;font-size: 25px; top: 3px; left: 7px;position: absolute;z-index: 3;} #right{width:200px; height:300px; float:left;background-color:#0CF;right: 150px; position: absolute ;top: 30px} </style> <body> <div class="wk"> <div> <div class="zl">楚留香</div> <div class="zl">陆小凤</div> <div class="zl">铁中棠</div> <div class="zl">李寻欢</div> <div class="zl">叶孤城</div> <div class="zl">花满楼</div> <div class="zl">西门吹雪</div> </div> <div class="middle1" >单个转移</div> <div class="middle2">多个转移</div> <div id="right"></div> </div> </body> <script type="text/javascript"> $(document).ready(function(e){ $(".zl").click(function(){ //清除所有选中颜色 $(".zl").css("background-color","#d4ff19"); $(".zl").attr("xz",0); //设置选中 $(this).css("background-color","#1DC71E"); $(this).attr("xz",1); }) //移动一项 $(".middle1").click(function(){ var xuanzhong=$(".zl"); for (var i=0;i<xuanzhong.length;i++) { //判断选中的某一项 if(xuanzhong.eq(i).attr("xz")==1) { var zhi=xuanzhong.eq(i).text(); // if(Has(zhi)) { var str = "<div class=‘zl2‘>"+zhi+"</div>"; $("#right").append(str); } } } }) $(".middle2").click(function(){ var lift = $(".zl"); for (var i=0;i<lift.length;i++) { var zhi = lift.eq(i).text(); if (Has(zhi)) { var str = "<div class=‘zl2‘>"+zhi+"</div>"; $("#right").append(str); } } }) }); function Has(zhi) { var list=$(".zl2"); var iscunzai=true; for (var i=0;i<list.length;i++) { if(list.eq(i).text()==zhi) { iscunzai = false; break; } } return iscunzai; } </script> </html>
时间: 2024-10-08 10:44:21