动态计算购物车总价（数量可选），nextSibling属性

最新推荐文章于 2018-12-21 15:39:29 发布

like-Betty

最新推荐文章于 2018-12-21 15:39:29 发布

阅读量1.2k

点赞数

分类专栏： js简单实现

本文链接：https://blog.csdn.net/u012309349/article/details/49386407

版权

js简单实现专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车，计算总价，数量可选，动态更新</title>
</head>
<body>
    <h2>我的购物车</h2>
    <input type="checkbox" name="fruits" value="5">苹果(5元)&nbsp;&nbsp;&nbsp;数量：<input type="number" min="1" value="1" id="苹果数量" class="numbers"><br/>
    <input type="checkbox" name="fruits" value="3">香蕉(3元)&nbsp;&nbsp;&nbsp;数量：<input type="number" min="1" value="1" id="香蕉数量" class="numbers"><br/>
    <input type="checkbox" name="fruits" value="7">西瓜(7元)&nbsp;&nbsp;&nbsp;数量：<input type="number" min="1" value="1" id="西瓜数量" class="numbers"><br/>
    <input type="checkbox" name="fruits" value="8">栗子(8元)&nbsp;&nbsp;&nbsp;数量：<input type="number" min="1" value="1" id="栗子数量" class="numbers"><br/>
    <input type="checkbox" name="fruits" value="10">哈密瓜(10元)数量：<input type="number" min="1" value="1" id="哈密瓜数量" class="numbers"><br/>
    <h3>总价格是：<span id="totalprice">--</span></h3>

    <script>
    var fruits = document.getElementsByName('fruits');
    var numbers = document.getElementsByClassName("numbers");

    for(var i=0;i<fruits.length;i++){
        fruits[i].onclick = count;
    }
    for(var i=0;i<numbers.length;i++){
        numbers[i].onclick = count;
    }
    function count(){
        var totalprice = 0;
        for(var i=0;i<fruits.length;i++){
            if(fruits[i].checked){
                var number = fruits[i].nextSibling.nextSibling.value;
                totalprice += parseFloat(fruits[i].value)*number;
            }
        }
        document.getElementById('totalprice').innerHTML = totalprice;
    }
    </script>
</body>
</html>

fruits[i].nextSibling.nextSibling.value;获得水果复选框元素其后的数量input元素，两个input之间有一段文本节点，所以使用.nextSibling.nextSibling将两者联系起来。
注意：nextSibling属性会将元素之间的空格作为一个节点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nextsibling</title>
<body>
    <p>列表示例：</p>
    <ul id="myList">
        <li id="item1">Coffee</li><li id="item2">Tea</li>
    </ul>
    <p id="demo">点击按钮来获得首个项目的下一个同胞的 id。</p>
    <button onclick="myFunction()">试一下</button>
    <script>
    function myFunction(){
        var x=document.getElementById("demo");  
        x.innerHTML=document.getElementById("item1").nextSibling.id;
    }
    </script>
    <p><b>注释：</b>元素中的空格被视作文本，而文本被视作文本节点。</p>
    <p>请尝试在两个 &lt;li&gt;元素之间添加空格，结果将是 "undefined"。</p>
</body>
</html>