案例一:伸缩二级菜单
$("html").click(function(){
if($("ul").attr("style")=='display: none;'){
$("ul").show();
}else{
$("ul").hide();
}
console.log($("ul:has(:hidden)"));//返回符合情况的ul数组
})
案例二:左右移动
<select name="" id="" multiple="">
<option value="">香蕉</option>
<option value="">苹果</option>
<option value="">葡萄</option>
<option value="">火龙果</option>
</select>
<button><<</button><button>>></button>
<select name="" id="" multiple></select>
<script src="jquery.js"></script>
<script>
$("button:first").click(function(){
$("select:last option:selected").appendTo($("select:first"));
})
$("button:last").click(function(){
$("select:first option:selected").appendTo($("select:last"));
})
</script>
案例三:购物车动态计算
<table width="600" border="1" rules="all" align="center">
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
<tr align="center">
<td>iPhoneX</td>
<td>$1024</td>
<td>
<input type="button" value="-">
<span>0</span>
<input type="button" value="+">
</td>
<td class="con">$0</td>
</tr>
<tr align="center">
<td>iPhoneX</td>
<td>$1024</td>
<td>
<input type="button" value="-">
<span>0</span>
<input type="button" value="+">
</td>
<td class="con">$0</td>
</tr>
<tr align="center">
<td>iPhoneX</td>
<td>$1024</td>
<td>
<input type="button" value="-">
<span>0</span>
<input type="button" value="+">
</td>
<td class="con">$0</td>
</tr>
<tr align="center">
<td colspan="3" align="right">total:</td>
<td class="content">$0</td>
</tr>
</table>
<script src="jquery.js"></script>
<script>
$("input[value='-']").click(function(){
var num=$(this).next().text()-1;
if (num<0) {num=0}
$(this).next().text(num);
totalPrice($(this),num);
})
$("input[value='+']").click(function(){
var num=parseInt($(this).prev().text())+1;
$(this).prev().text(num);
totalPrice($(this),num);
})
function totalPrice(dom,n){
//商品价格
var priceText=dom.parent().prev().text();
//商品价格去$
var price=priceText.slice(1,priceText.length);
//商品总和
dom.parent().next().text("$"+n*price);
var total=0;
$(".con").each(function(index,dom){
var p=$(dom).text();
total+=parseInt(p.slice(1,p.length));
})
$(".content").text("$"+total);
}
</script>
---------------------
【转载,仅作分享,侵删】
作者:Ryan Ji
原文:https://blog.csdn.net/qq_42451979/article/details/82774802
版权声明:本文为博主原创文章,转载请附上博文链接!
|
|