Question

我试图用jQuery做一些这样的事情：

要显示灰色spans内的数字总和，以便用户可以对div进行排序并找到spans

中的数字总和

但它没有用。

这是我的代码;

$(document).ready(function(e) {

$("#menu").sortable({
	
	stop:function(){				
				
	$("#s1").text(parseInt($('#a1').text())+parseInt($('#a2').text())+parseInt($('#a3').text()));
	
	$("#s2").text(parseInt($('#b1').text())+parseInt($('#b2').text())+parseInt($('#b3').text()));
	
	$("#s3").text(parseInt($('#c1').text())+parseInt($('#c2').text())+parseInt($('#c3').text()));
	
	$("#s4").text(parseInt($('#a1').text())+parseInt($('#b1').text())+parseInt($('#c1').text()));
	
	$("#s5").text(parseInt($('#a2').text())+parseInt($('#b2').text())+parseInt($('#c2').text()));
	
	$("#s6").text(parseInt($('#a3').text())+parseInt($('#b3').text())+parseInt($('#c3').text()));
	
			
	}
   });
});

@charset "utf-8";
#main{
	width:960px;
	height:700px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	}
#menu {
	margin-left: auto;
	margin-right: auto;
	width: 300px;
	height: 300px;
	
}

#menu li {
	width: 100px;
	height: 100px;
	float:left;
	list-style-type:none;
	text-align:center;
	line-height:100px;
}

#menu #a1 {
	background-color: #FF9AA9;
	
}
#menu #a2 {
	background-color: #FF8AA9;
	
}
#menu #a3 {
	background-color: #FF7AA9;
	
}
#menu #b1 {
	background-color: #FF6AA9;
	
}
#menu #b2 {
	background-color: #6269F8;
	
}
#menu #b3 {
	background-color: #F3FF79;
	
}
#menu #c1 {
	background-color: #6EF8A4;
	
}
#menu #c2 {
	background-color: #88BAFF;
	
}
#menu #c3 {
	background-color: #B878E9;
	
}
.spn{
	width:50px;
	height:50px;
	position:absolute;
	background-color:gray;
	}

#s1{
	top:25px;
	left:700px;
	}
#s2{
	top:125px;
	left:700px;
	}
#s3{
	top:225px;
	left:700px;
	}
#s4{
	top:350px;
	left:575px;
	}
#s5{
	top:350px;
	left:475px;
	}
#s6{
	top:350px;
	left:375px;
	}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
</head>
<body><br>
<div id="main">    
    <ul id="menu">
    
          <li class="cld" id="a1">18</li>
          <li class="cld" id="a2">13</li>
          <li class="cld" id="a3">12</li>
        
          <li class="cld" id="b1">20</li>
          <li class="cld" id="b2">19</li>
          <li class="cld" id="b3">9</li>
                  
          <li class="cld" id="c1">14</li>
          <li class="cld" id="c2">8</li>
          <li class="cld" id="c3">7</li>
       
    </ul>

<span class="spn" id="s1"></span>
<span class="spn" id="s2"></span>
<span class="spn" id="s3"></span>
<span class="spn" id="s4"></span>
<span class="spn" id="s5"></span>
<span class="spn" id="s6"></span>

</div>
</body>
</html>

显示jquery可排序函数的数字总和

0 个答案: