jquery中li添加列表问题
为什么我这个功能点击选中其中任意一个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>
cqw1回答
-
cqw
忽然想到解决方法了。。。。。$("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"));});
随时随地看视频慕课网APP
相关分类
JQuery