javascript - 切换具有相似 ID 的子元素的父 DIV 以计算其价格

标签 javascript jquery html toggle

我正在尝试,当默认加载下面的页面以显示 a1 div 时,只需计算该 div 的价格并显示总计,例如216.

当用户单击更改链接/按钮时,它应该隐藏 a1 并显示 a2 div 并计算 a2 的价格,例如201.

有人可以指导我如何实现这一目标吗?一直在尝试,到目前为止还没有成功。

这是我正在工作的代码的快照,代表其逻辑。我希望它能让我更清楚地了解我的情况。

<script type="text/javascript">
    function prc_calc() {
        $price = parseInt($('#price').attr('value'));
        $quantity = parseInt($('#quantity').attr('value'));
        $sum = $price * $quantity;
        $('#total').text($sum);
    }

    function change() {
        prc_calc();
    }

    $(document).ready(function() {
        prc_calc();
    }
</script>

<body>
    <div id="a1" style="display:block">
        <span id="price">54</span>
        <span id="quantity">4</span>
    </div>

    <div id="a2" style="display:none">
        <span id="price">67</span>
        <span id="quantity">3</span>
    </div>

    <span id="total"></span>

    <a href="javascript:void(0);" onclick="change();">Change</a>
</body>

最佳答案

您需要重构一些东西,首先拥有两个具有相同 ID 的元素不会对您有帮助。我已经使用名为 .selected 的类进行了重组:

http://jsfiddle.net/5tDUM/

CSS:

.selected {
    display:block !important;
}

HTML:

<body>
    <div id="a1" style="display:none" class="selected">
        <span class="price">54</span>
        <span class="quantity">4</span>
    </div>

    <div id="a2" style="display:none">
        <span class="price">67</span>
        <span class="quantity">3</span>
    </div>

    <span id="total"></span>

    <a id="changeclick">Change</a>
</body>

Javascript:

function prc_calc() {

        var price = $('.selected .price').text();

        var quantity = $('.selected .quantity').text();
        var sum = price * quantity;
        $('#total').text(sum);

    }

function changeprice() {

    }

    $(document).ready(function() {

        prc_calc();
    });


$('#changeclick').click(function() {
     $('#a1').toggleClass('selected');
     $('#a2').toggleClass('selected');
        prc_calc();


});

关于javascript - 切换具有相似 ID 的子元素的父 DIV 以计算其价格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15743194/

相关文章:

html - 用 css 打印分页 |分页前 :always; cross-browser issue!

javascript - 当用户按 Enter 键时聚焦于下一个表单字段?

javascript - 调用所需函数时是否会触发惰性 javascript 下载/解释?

jquery - 使用箭头键导航

jquery - ASP.NET MVC 3 上的 jQuery Mobile 主题分配失败

html - 需要帮助让我的 div 显示内联

javascript - 如何在 JS 的导航栏中向下滚动时显示不同的 Logo 颜色

javascript - 打包json脚本运行多个环境变量

JavaScript:将所有事件处理程序重置为默认值/禁用自定义处理程序

javascript - 使用 jQuery 选择输入字段中括号之间的文本