码迷,mamicode.com
首页 > 其他好文 > 详细

购物车商品加减效果

时间:2016-01-29 00:19:13      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:

思路:

  根据点击运算符进行相关的运算。

  1、获取点击的运算符;

  2、通过节点关系找到input的值;

  3、进行运算;

  4、将计算后的值返回给本身

  

JavaScript方式:

<body>
    <button onclick="calculate(this)">-</button>
    <input type="text" size="2" value="1" name="num">
    <button onclick="calculate(this)">+</button><br/>

    <button onclick="calculate(this)">-</button>
    <input type="text" size="2" value="1" name="num">
    <button onclick="calculate(this)">+</button>

    <script>
        function calculate(ob){
            var opera = ob.innerHTML;
            if(opera == +){
                // console.log(ob.previousSibling.previousSibling);
                var input = ob.previousSibling.previousSibling;
                input.value = parseInt(input.value) + 1;
            }else if(opera == -){
                var input = ob.nextSibling.nextSibling;
                input.value = parseInt(input.value) - 1;
                if( input.value < 1 ){
                    input.value = 1;
                }
            }
        }
    </script>
</body>

 

jQuery方式:

<body>
    <button>-</button>
    <input type="text" size="2" value="1" name="num">
    <button>+</button><br/>

    <button>-</button>
    <input type="text" size="2" value="1" name="num">
    <button>+</button><br/>

    <script>
        $(function(){
            $(button).on(click,function(){
                var opera = $(this).text();
                // console.log(opera);
                if(opera == +){
                    var num = $(this).prev();
                    num.val( parseInt( num.val() ) + 1 );
                    // console.log(num.val());
                }else if(opera == -){
                    var num = $(this).next();
                    num.val( parseInt( num.val() ) - 1 );
                    if(num.val() < 1){
                        // console.log(num.val());
                        num.val(1);
                    }
                }
            });
        });
    </script>
</body>

 

购物车商品加减效果

标签:

原文地址:http://www.cnblogs.com/huang-cheng/p/5167668.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!