为什么我这个功能点击选中其中任意一个li，然后点击button的时候可以实现添加，但是我连续点击几个li的时候，再点击button就把点击过的一起添加了呢，请大神帮帮我。。。。注：这个功能是从左边列表中选中其中一项，点击按钮，添加到右边里面<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="js/jquery-ui.css"> <script src="js/jquery-1.11.3.js"></script> <script src="js/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"><style type="text/css" media="screen">#dialog-domain{background: white;}ul{border: 1px rgba(0,0,0,0.1) solid;padding: 0;margin: 0;height: 400px;overflow:auto; }ul li{list-style-type: none;font-size: 14px;font-weight: bold;height: 25px;line-height: 25px;}ul li:hover{background: #d6e8f6;}.domain-contain .left,.domain-contain .right{/*border: 1px rgba(0,0,0,0.1) solid;*/width: 280px;}.domain-contain .left{float: left;}.domain-contain .right{float: right;}.domain-contain #process{padding: 0;margin: 0;background: rgba(0,0,0,0.1);color: blue;width: 280px;height: 30px;line-height: 30px;font-size: 15px;font-weight: bold;}.domain-contain .domain-center{/*border: 1px rgba(0,0,0,0.1) solid;*/width: 74px;height: 430px;float: left;margin: 0 auto;text-align: center;}.domain-contain .domain-center .btn{background: #86bde4;/*margin:-14px;*/padding:0; border: 0;list-style-type:none;position: absolute;top:200px;width: 30px;height: 30px;}.domain-contain .domain-center .btn_r{position: absolute;top:258px;border: 0;background: #86bde4;/*margin:-14px;*/padding:0; list-style-type:none;width: 30px;height: 30px;}.ui-widget-header { /*border: 1px solid #aaaaaa;*/ border: 0;background-color:rgba(0,0,0,0.1); color: white; font-size: 15px;font-weight: bold; height: 25px;line-height: 25px;}.ui-button-text-only .ui-button-text { background: rgba(0,0,0,0.5); color: white; } .ui-dialog .ui-dialog-buttonpane button { background: rgba(0,0,0,0.5); color: white; border: 0; height: 25px; width: 65px;} .ui-dialog .ui-dialog-buttonpane{ margin-top: 0; } /*user msg*/ .change_it{ /*float: right; font-size: 15px;*/ font-weight: bold; width: 100%; height: 20px; font-size: 15px; } .change_it a{ text-decoration: none; float: right; border: 0; padding: 0; margin: 0; margin-right: 8px; color: blue; } .change_it a:hover{ background: #d6e8f6; } /*#*/ .user_list{ margin: 0 auto; }</style></head><body><script type="text/javascript">$(function() { $( "#dialog-domain" ).dialog({ modal:true, width:700, height:580, autoOpen: false, show: { effect: "blind", duration: 1000 }, hide: { effect: "explode", duration: 1000 }, //按钮 buttons: { "Save": function() { $( this ).dialog( "close" );alert("Updated Successfully!"); } }); $( "#opener" ).click(function() { $( "#dialog-domain" ).dialog( "open" ); }); }); $( "#rewind" ).button({ text: false, icons: { primary: "ui-icon-seek-prev" } }); $( "#forward" ).button({ text: false, icons: { primary: "ui-icon-seek-next" } });</script><!----> <div id="dialog-domain" title="Add process to domain"> <div class="change_it"><a class="animated bounceInRight" href="#"style="display: none;" onclick="change_msg();">back</a></div> <div class="domain-contain "> <div class="left"><p id="process"> Process</p> <ul> <li>process1</li> <li>process2</li> <li>process3</li> <li>process4</li> <li>process5</li> <li>process6</li> <li>process1</li> <li>process2</li> <li>process3</li> <li>process4</li> <li>process5</li> <li>process6</li> <li>process1</li> <li>process2</li> <li>process3</li> <li>process4</li> <li>process5</li> <li>process6</li> <li>process1</li> <li>process2</li> <li>process3</li> <li>process4</li> <li>process5</li> <li>process6</li> </ul></div><div class="right"> <p id="process"> Domain</p><ul></ul></div><div class="domain-center"><input type="button" class="btn" style="color: white;font-weight: bold;" value="▶▶" /><br /><input type="button" class="btn_r" style="color: white;font-weight: bold;" value="◀◀"/></div></div> </div> <button id="opener">add process to domain</button> <script type='text/javascript' language='javascript'>//add$(document).ready(function(){//从左往右//遍历li $("div ul li").click(function(e){ $(this).css({"background":"#d6e8f6"}).siblings().css("background","white"); var t=$(this).html(); var ff=$(this); $(".btn").click(function(){ ff.remove(); $(".right ul").append("<li>"+t+"</li>"); $(this).unbind("click"); alert("123") }); });});</script></body></html>
1 回答
cqw
TA贡献1条经验 获得超2个赞
忽然想到解决方法了。。。。。
$("div ul li").click(function(){
$(this).addClass('selected').css({"background":"#d6e8f6"}).siblings('.selected').css("background","white").removeClass('selected');
});
$(".btn").click(function(){
$(".right ul").append($("div ul li.selected"));
});
- 1 回答
- 0 关注
- 1417 浏览
添加回答
举报
0/150
提交
取消