• 购物车商品加减效果


    思路:

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

      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>
  • 相关阅读:
    Oracle 添加主键和索引
    Oracle中查询主键、外键、sequence、表基本信息等
    Spring工作原理
    Ehcache 缓存使用
    socket编程-java
    oracle触发器详解
    单例模式的几种写法
    [LeetCode] 412. Fizz Buzz 嘶嘶嗡嗡
    LeetCode Top Interview Questions
    [LeetCode] 131. Palindrome Partitioning 回文分割
  • 原文地址:https://www.cnblogs.com/huang-cheng/p/5167668.html
Copyright © 2020-2023  润新知