使用功能更改复选框单击时的 div 内容不起作用答案

【问题标题】：Using function to change div content on checkbox click not working使用功能更改复选框单击时的 div 内容不起作用
【发布时间】：2014-09-30 00:32:25
【问题描述】：

同样的问题更多 if() 语句会导致它停止工作。

我正在为我的广告代理商构建一个自定义订单表单，用户可以在其中从表单复选框中选择他们想要的商品，并且下面的小计/订单汇总表会相应更新。客户必须至少获得 1125 美元的基本位置，而四个次要位置是可选的，价格为 450 美元。如果客户决定获得额外的[s]，那么交易成本也会上升（每个 75 美元）。

一切正常，直到我达到最高金额，然后表格无法正确更新。

更新了完整问题的小提琴： http://jsfiddle.net/joelslevy21/5v8Ltkxf/3/

更新脚本：

                    if ( totalFinal == "3,330" ) {
                        $('#companion').css("display","block");
                        $('#quantityCompanion').text("4");
                        $('#subTotalCompanion').text("$1,800");
                        $('#quantityTrafficking').text("5");
                        $('#subTotalTrafficking').text("$375");
                    } else if ( totalFinal == "2,775" ) {
                        $('#companion').css("display","block");
                        $('#quantityCompanion').text("3");
                        $('#subTotalCompanion').text("$1,350");
                        $('#quantityTrafficking').text("4");
                        $('#subTotalTrafficking').text("$300");
                    } else if ( totalFinal == "2,250" ) {
                        $('#companion').css("display","block");
                        $('#quantityCompanion').text("2");
                        $('#subTotalCompanion').text("$900");
                        $('#quantityTrafficking').text("3");
                        $('#subTotalTrafficking').text("$225");
                    } else if ( totalFinal == "1,725" ) {
                        $('#companion').css("display","block");
                        $('#quantityCompanion').text("1");
                        $('#subTotalCompanion').text("$450");
                        $('#quantityTrafficking').text("2");
                        $('#subTotalTrafficking').text("$150");
                    } else {
                        $('#companion').css("display","none");
                        $('#quantityTrafficking').text("1");
                        $('#subTotalTrafficking').text("$75");
                    }

【问题讨论】：

一遍又一遍地调用.getElementsByClassName() 不好 - 你为什么不直接使用$('.final').each(...) ？
Here's a fixed version of the fiddle。我不明白到底是什么问题。
@Pointy 我不知道 .getElementsByClassName() 不是通过它的类来调用某些东西的最佳方式，感谢您提供的信息。感谢您修复小提琴，出于好奇，它有什么问题？问题是在订单中添加一个点并且您尝试删除该点后，订单摘要中的投放数量和小计不会分别回退到“1”和“$40”，而是停留在“2”并且“80 美元”。
好吧，.getElementsByClassName() 并没有什么问题，但是浏览器必须处理它，因此每次循环迭代都重新执行它以获取单个元素是非常低效的。既然您已经在使用 jQuery，那么您不妨全力以赴。我所做的只是将 JavaScript 移动到正文（jsfiddle 设置）并在页面中添加一个“数量”元素，因为它丢失了。
为什么你的function orderSummary() 在你的function calculate() 和while(init = document.getElementsByClassName("final")[i++]) { 里面？

标签： javascript php html css forms

【解决方案1】：

您的Trafficking 始终停留在2/$80，因为您将其设置为if/else/if/else 块

                if ( totalFinal == "805" ) {
                    $('#companion').css("display","block");
                    $('#quantityTrafficking').text("2");  // Sets to 2 
                    $('#subTotalTrafficking').text("$80");  // Sets to $80
                } else {
                    $('#companion').css("display","none");
                    $('#quantityTrafficking').text("1");  // Ignored due to other else
                    $('#subTotalTrafficking').text("$40"); // Ignored due to other else
                }
                if ( totalFinal == "1,095" ) {
                    $('#companion').css("display","block");
                    $('#quantityCompanion').text("2");
                    $('#subTotalCompanion').text("$500");
                    $('#quantityTrafficking').text("3");  // Sets to 3
                    $('#subTotalTrafficking').text("$120"); // Sets to $120

                } else {
                    $('#quantityTrafficking').text("2"); // Sets to 2, as it overwrites other else
                    $('#subTotalTrafficking').text("$80"); // Sets to $80, as it overwrites other else
                    $('#quantityCompanion').text("1");
                    $('#subTotalCompanion').text("$250");
                }

你想要的是一个if/elseif/else 块

                if ( totalFinal == "1,095" ) {
                    $('#companion').css("display","block");
                    $('#quantityCompanion').text("2");
                    $('#subTotalCompanion').text("$500");
                    $('#quantityTrafficking').text("3");
                    $('#subTotalTrafficking').text("$120");
                } else if ( totalFinal == "805" ) {
                    $('#companion').css("display","block");
                    $('#quantityCompanion').text("1");
                    $('#subTotalCompanion').text("$250");
                    $('#quantityTrafficking').text("2");
                    $('#subTotalTrafficking').text("$80");
                } else {
                    $('#companion').css("display","none");
                    $('#quantityTrafficking').text("1");
                    $('#subTotalTrafficking').text("$40");
                }

【讨论】：

谢谢！！完美地工作。关于声明 orderSummary() 函数，将它放在计算函数中是否有害，或者更多的是最佳实践原因？顺便说一句，你如何让内联代码显示在 cmets 中？我是菜鸟..想不通
最好的做法是不要嵌套函数声明，以使函数在父函数之外可用。要在 cmets 中编写代码，请将代码包装在反引号 ` -> `$(function() { ... }` 中。要包含反引号，请将其转义 -> \`