A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

案例一:伸缩二级菜单


$("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
版权声明:本文为博主原创文章,转载请附上博文链接!

1 个回复

倒序浏览
奈斯,感谢分享!
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马