首页 > 其他 > 详细

购物车商品加减效果

时间:2016-01-29 00:17:16      阅读:145      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!