JavaScriptはプラス記号機能を実装するショッピングカート機能を開発します

コードの HTML 部分を見てみましょう:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        table{width:350px;border:1px solid #eee;text-align:center;}
        .tr2{height:50px;}
        input{width:30px;height:20px;text-align: center;}
        a{text-decoration:none}
    </style>
</head>
<body>
        <table cellspacing="0" cellpadding="0" border="1">
            <tr>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>总价</th>
            </tr>

            <tr class="tr2">
                <td>手表</td>
                <td id="price">1999</td>
                <td>
                    <a href="#" id="a1" class="tp1">-</a>
                    <input type="text" value="1" id="count" >
                    <a href="#" id="a2" class="tp2">+</a>
                </td>
                <td id="total">1999</td>
            </tr>

            <tr class="tr2">
                <td>手机</td>
                <td id="price_1">2000</td>
                <td>
                    <a href="#" id="a1" class="tp1">-</a>
                    <input type="text" value="1" id="count_1">
                    <a href="#" id="a2" class="tp2">+</a>
                </td>
                <td id="total_1">2000</td>
            </tr>
        </table>
        </br>
</body>
</html>

上記のコードに示すように、2 つの商品があります。商品を追加するたびにプラス関数とマイナス関数を記述すると、コードが膨大になってしまいます。、それも可能ですが、お勧めできません。そこで、以下の関数を作成できます

分析しましょう、関数のパラメータは何ですか?

実際、加算と減算の関数を実行して合計価格が変化する場合、必要なのは単価、合計価格、数量の 3 つのパラメーターだけです

上記のコードで単価を表示しているセルを見てください。 ID は価格と合計価格セル、ID は合計、最初の製品テキストボックスの ID は count

次に、セルコードを確認します:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        table{width:350px;border:1px solid #eee;text-align:center;}
        .tr2{height:50px;}
        input{width:30px;height:20px;text-align: center;}
        a{text-decoration:none}
    </style>
</head>
<body>
        <table cellspacing="0" cellpadding="0" border="1">
            <tr>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>总价</th>
            </tr>

            <tr class="tr2">
                <td>手表</td>
                <td id="price">1999</td>
                <td>
                    <a href="#" id="a1" class="tp1" onclick="a2('price','total','count')">-</a>
                    <input type="text" value="1" id="count" onblur="a3('price','total','count')">
                    <a href="#" id="a2" class="tp2" onclick="a1('price','total','count')">+</a>
                </td>
                <td id="total">1999</td>
            </tr>

            <tr class="tr2">
                <td>手机</td>
                <td id="price_1">1999</td>
                <td>
                    <a href="#" id="a1" class="tp1" onclick="a2('price_1','total_1','count_1')">-</a>
                    <input type="text" value="1" id="count_1" onblur="a3('price_1','total_1','count_1')">
                    <a href="#" id="a2" class="tp2" onclick="a1('price_1','total_1','count_1')">+</a>
                </td>
                <td id="total_1">1999</td>
            </tr>
        </table>
        </br>
</body>
</html>

上のコードに示すように、クリックイベントをバインドしますプラス記号とマイナス記号の両方に、3 つのパラメーターが含まれています。製品単価価格と価格_1 合計価格の合計と合計_1 数量カウントとカウント_1

プラス関数を実装しましょう

<script type="text/javascript">
            function a1(td,td2,id){
                var price = document.getElementById(td).innerHTML;//获得单价
                var total = document.getElementById(td2).innerHTML;//获得总价
                var v1 = parseInt(document.getElementById(id).value);//获得数量
                document.getElementById(id).value = v1+1;   //获取点击后的数量
                document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1+1); //总价格等于单价乘以点击后的数量值
            }
</script>

次の完全なコードを見てみましょう:効果は達成されます

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        table{width:350px;border:1px solid #eee;text-align:center;}
        .tr2{height:50px;}
        input{width:30px;height:20px;text-align: center;}
        a{text-decoration:none}
    </style>
    <script type="text/javascript">
        function a1(td,td2,id){
                var price = document.getElementById(td).innerHTML;//获得单价
                var total = document.getElementById(td2).innerHTML;//获得总价
                var v1 = parseInt(document.getElementById(id).value);//获得数量
                document.getElementById(id).value = v1+1;
                document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1+1);
            }
    </script>
</head>
<body>
        <table cellspacing="0" cellpadding="0" border="1">
            <tr>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>总价</th>
            </tr>

            <tr class="tr2">
                <td>手表</td>
                <td id="price">1999</td>
                <td>
                    <a href="#" id="a1" class="tp1" onclick="a2('price','total','count')">-</a>
                    <input type="text" value="1" id="count" onblur="a3('price','total','count')">
                    <a href="#" id="a2" class="tp2" onclick="a1('price','total','count')">+</a>
                </td>
                <td id="total">1999</td>
            </tr>

            <tr class="tr2">
                <td>手机</td>
                <td id="price_1">1999</td>
                <td>
                    <a href="#" id="a1" class="tp1" onclick="a2('price_1','total_1','count_1')">-</a>
                    <input type="text" value="1" id="count_1" onblur="a3('price_1','total_1','count_1')">
                    <a href="#" id="a2" class="tp2" onclick="a1('price_1','total_1','count_1')">+</a>
                </td>
                <td id="total_1">1999</td>
            </tr>
        </table>
        </br>
</body>
</html>

商品がいくつあるかに関係なく、上の例を見てください。価格が異なり、合計金額も異なるため、より便利で簡単になります。この方法

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table{width:350px;border:1px solid #eee;text-align:center;} .tr2{height:50px;} input{width:30px;height:20px;text-align: center;} a{text-decoration:none} </style> <script type="text/javascript"> function a1(td,td2,id){ var price = document.getElementById(td).innerHTML;//获得单价 var total = document.getElementById(td2).innerHTML;//获得总价 var v1 = parseInt(document.getElementById(id).value);//获得数量 document.getElementById(id).value = v1+1; document.getElementById(td2).innerHTML = parseInt(price) * parseInt(v1+1); } </script> </head> <body> <table cellspacing="0" cellpadding="0" border="1"> <tr> <th>名称</th> <th>单价</th> <th>数量</th> <th>总价</th> </tr> <tr class="tr2"> <td>手表</td> <td id="price">1999</td> <td> <a href="#" id="a1" class="tp1" onclick="a2('price','total','count')">-</a> <input type="text" value="1" id="count" onblur="a3('price','total','count')"> <a href="#" id="a2" class="tp2" onclick="a1('price','total','count')">+</a> </td> <td id="total">1999</td> </tr> <tr class="tr2"> <td>手机</td> <td id="price_1">1999</td> <td> <a href="#" id="a1" class="tp1" onclick="a2('price_1','total_1','count_1')">-</a> <input type="text" value="1" id="count_1" onblur="a3('price_1','total_1','count_1')"> <a href="#" id="a2" class="tp2" onclick="a1('price_1','total_1','count_1')">+</a> </td> <td id="total_1">1999</td> </tr> </table> </br> </body> </html>

提出するリセットコード

自動運転