黑马程序员技术交流社区

标题: 【上海校区】jQuery动态效果——二级菜单、左右移动、购... [打印本页]

---

作者: 不二晨    时间: 2019-3-29 16:37
标题: 【上海校区】jQuery动态效果——二级菜单、左右移动、购...
案例一：伸缩二级菜单


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

---

作者: 不二晨    时间: 2019-4-10 14:31
奈斯，感谢分享！

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2