zoukankan      html  css  js  c++  java
  • 购物车商品加减效果

    思路:

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

      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>
  • 相关阅读:
    BZOJ3813 奇数国
    BZOJ2735 世博会
    BZOJ2081 [Poi2010]Beads
    BZOJ3276 磁力
    BZOJ2054 疯狂的馒头
    BZOJ2610 [Poi2003]Monkeys
    BZOJ2428 [HAOI2006]均分数据
    BZOJ2120 数颜色
    BZOJ2527 [Poi2011]Meteors
    补比赛——牛客OI周赛9-普及组
  • 原文地址:https://www.cnblogs.com/huang-cheng/p/5167668.html
Copyright © 2011-2022 走看看