我的 Javascript 计算没有按计划工作

Question

这是我的Javascript代码：

$(".myCorOpt").change(function () {
var $corporateA = $("#corporateA").val();
var $corporateB = $("#corporateB").val();
var $corporateE = $("#corporateE").val();
var $corElevators = Math.ceil($corporateE * ($corporateA + + $corporateB) / 1000);
var $corColumns = Math.ceil(($corporateA + + $corporateB) / 20);
var $elevatorsPerColumnsCor = Math.ceil($corElevators / $corColumns);
var $corTotalElevators = $elevatorsPerColumnsCor * $corColumns;
})

所以 $corporateA = 89，$corporateB = 6，$corporateE = 240。 如果我在纸上进行计算，我会得到这样的东西：

Math.ceil(240(89+6)/1000) = 23
Math.ceil((89+6)/20) = 5
Math.ceil(23/5)=5
$corTotalElevators = 5*5=25

但是一旦我在报价中输入我的值(在我的网站上(，我就会得到 225 作为我的最终结果......有人可以解释我做错了什么吗？

Answer 1

您需要将输入字段值解析为整数：

parseInt($('#corporateA').val(), 10) // 89 (integer)

另外，作为提示，避免将美元符号前缀为非 jQuery 对象。

正确用法

let $corporateA = $('#corporateA'); // Storing a jQuery DOM object
let valA = parseInt($corporateA.val(), 10);

---

作为jQuery插件

你也可以编写自己的jQuery插件，使调用方便简洁。

(function($) {
$.fn.intVal = function(radix) {
return parseInt(this.val(), radix || 10);
};
})(jQuery);
let corporateA = $('#corporate-a').intVal();
let corporateB = $('#corporate-b').intVal();
let corporateE = $('#corporate-e').intVal();

---

工作演示

HTML 约定规定元素 ID 和类应该是烤肉串大小写或蛇大小写，而不是小驼大小写。

$('.my-cor-opt').change(function(e) {
let corporateA = parseInt($('#corporate-a').val(), 10);
let corporateB = parseInt($('#corporate-b').val(), 10);
let corporateE = parseInt($('#corporate-e').val(), 10);

let corElevators = Math.ceil(corporateE * (corporateA + corporateB) / 1000);
let corColumns = Math.ceil((corporateA + corporateB) / 20);
let elevatorsPerColumnsCor = Math.ceil(corElevators / corColumns);
let corTotalElevators = elevatorsPerColumnsCor * corColumns;
alert(corTotalElevators); // 25
});
$('.my-cor-opt').trigger('change');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="corporate-a" value="89" />
<input id="corporate-b" value="6" />
<input id="corporate-e" value="240" />
<select class="my-cor-opt"></select>

Answer 2

您需要将字符串类型的输入字段的值解析为数字。

实现这一目标有两种主要策略。 1. 在每个输入字段前面加上一元加号运算符 2. 使用parseInt函数解析

如果无法将字符串解析为数字，则二进制plus运算符将执行字符串连接而不是加法

'1' + '2' + '3' // '123'
1 + 2 + 3 // 6
+'1' + +'2' + +'3' // 6
parseInt('1', 10) + parseInt('2', 10) + parseInt('3', 10) // 6

有关更多详细信息，请参阅此处：parseInt vs oneary plus，何时使用哪个？

一元加运算符

"use strict";
console.clear();
$(".myCorOpt").change(function () {
var $corporateA = +$("#corporateA").val();
var $corporateB = +$("#corporateB").val();
var $corporateE = +$("#corporateE").val();
var $corElevators = Math.ceil(
($corporateE * ($corporateA + $corporateB)) / 1000
);
var $corColumns = Math.ceil(($corporateA + $corporateB) / 20);
var $elevatorsPerColumnsCor = Math.ceil($corElevators / $corColumns);
var $corTotalElevators = $elevatorsPerColumnsCor * $corColumns;
$('#corElevators').val($corElevators);
$('#corColumns').val($corColumns);
$('#elevatorsPerColumnsCor').val($elevatorsPerColumnsCor);
$('#corTotalElevators').val($corTotalElevators);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="myCorOpt">
<table>
<tr><td>Corporate A</td><td><input id="corporateA" placeholder="corporateA" value="89"></td></tr>
<tr><td>Corporate B</td><td><input id="corporateB" placeholder="corporateB" value="6"></td></tr>
<tr><td>Corporate E</td><td><input id="corporateE" placeholder="corporateE"></td></tr>
<tr><td colspan="2"><hr></td></tr>
<tr><td>Elevators</td><td><input id="corElevators"></td></tr>
<tr><td>Columns</td><td><input id="corColumns"></td></tr>
<tr><td>Elevators per Columns</td><td><input id="elevatorsPerColumnsCor"></td></tr>
<tr><td>Total Elevators</td><td><input id="corTotalElevators"></td></tr>
</form>

parseInt

"use strict";
console.clear();
$(".myCorOpt").change(function () {
var $corporateA = parseInt($("#corporateA").val(), 10);
var $corporateB = parseInt($("#corporateB").val(), 10);
var $corporateE = parseInt($("#corporateE").val(), 10);
var $corElevators = Math.ceil(
($corporateE * ($corporateA + $corporateB)) / 1000
);
var $corColumns = Math.ceil(($corporateA + $corporateB) / 20);
var $elevatorsPerColumnsCor = Math.ceil($corElevators / $corColumns);
var $corTotalElevators = $elevatorsPerColumnsCor * $corColumns;
$('#corElevators').val($corElevators);
$('#corColumns').val($corColumns);
$('#elevatorsPerColumnsCor').val($elevatorsPerColumnsCor);
$('#corTotalElevators').val($corTotalElevators);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="myCorOpt">
<table>
<tr><td>Corporate A</td><td><input id="corporateA" placeholder="corporateA" value="89"></td></tr>
<tr><td>Corporate B</td><td><input id="corporateB" placeholder="corporateB" value="6"></td></tr>
<tr><td>Corporate E</td><td><input id="corporateE" placeholder="corporateE"></td></tr>
<tr><td colspan="2"><hr></td></tr>
<tr><td>Elevators</td><td><input id="corElevators"></td></tr>
<tr><td>Columns</td><td><input id="corColumns"></td></tr>
<tr><td>Elevators per Columns</td><td><input id="elevatorsPerColumnsCor"></td></tr>
<tr><td>Total Elevators</td><td><input id="corTotalElevators"></td></tr>
</form>