如何在 javascript 中强制添加而不是连接

我试图在我的 javascript 中添加所有的卡路里内容,像这样:

$(function() {
var data = [];


$( "#draggable1" ).draggable();
$( "#draggable2" ).draggable();
$( "#draggable3" ).draggable();


$("#droppable_box").droppable({
drop: function(event, ui) {
var currentId = $(ui.draggable).attr('id');
var total = 0;
data.push($(ui.draggable).attr('id'));


if(currentId == "draggable1"){
var myInt1 = parseFloat($('#MealplanCalsPerServing1').val());
}
if(currentId == "draggable2"){
var myInt2 = parseFloat($('#MealplanCalsPerServing2').val());
}
if(currentId == "draggable3"){
var myInt3 = parseFloat($('#MealplanCalsPerServing3').val());
}
if ( typeof myInt1 === 'undefined' || !myInt1 ) {
myInt1 = parseInt(0);
}
if ( typeof myInt2 === 'undefined' || !myInt2){
myInt2 = parseInt(0);
}
if ( typeof myInt3 === 'undefined' || !myInt3){
myInt3 = parseInt(0);
}
total = parseFloat(myInt1 + myInt2 + myInt3);
$('#response').append(total);
}
});
$('#myId').click(function(event) {
$.post("process.php", ({ id: data }), function(return_data, status) {
alert(data);
//alert(total);
});
});
});

而不是添加变量,他们得到连接。我尝试过使用 parseInt、 parseFloat 和 Number,但我仍然只得到连接而不是加法。请查看 http://maureenmoore.com/momp_112412/121912_800.html的视图源

134473 次浏览

您的代码连接三个字符串,然后将 结果转换为一个数字。

您需要通过在每个数字周围调用 parseFloat()来将 每个变量转换为一个数字。

total = parseFloat(myInt1) + parseFloat(myInt2) + parseFloat(myInt3);

以下语句将值追加到 id 为 response的元素

$('#response').append(total);

这看起来像是在连接字符串,但实际上并非如此,而是将它们附加到元素

改成

$('#response').text(total);

您需要更改拖放事件,以便它将元素的值替换为 total,您还需要跟踪 total 是什么,我建议使用以下内容

$(function() {
var data = [];
var total = 0;


$( "#draggable1" ).draggable();
$( "#draggable2" ).draggable();
$( "#draggable3" ).draggable();


$("#droppable_box").droppable({
drop: function(event, ui) {
var currentId = $(ui.draggable).attr('id');
data.push($(ui.draggable).attr('id'));


if(currentId == "draggable1"){
var myInt1 = parseFloat($('#MealplanCalsPerServing1').val());
}
if(currentId == "draggable2"){
var myInt2 = parseFloat($('#MealplanCalsPerServing2').val());
}
if(currentId == "draggable3"){
var myInt3 = parseFloat($('#MealplanCalsPerServing3').val());
}
if ( typeof myInt1 === 'undefined' || !myInt1 ) {
myInt1 = parseInt(0);
}
if ( typeof myInt2 === 'undefined' || !myInt2){
myInt2 = parseInt(0);
}
if ( typeof myInt3 === 'undefined' || !myInt3){
myInt3 = parseInt(0);
}
total += parseFloat(myInt1 + myInt2 + myInt3);
$('#response').text(total);
}
});


$('#myId').click(function(event) {
$.post("process.php", ({ id: data }), function(return_data, status) {
alert(data);
//alert(total);
});
});
});

我将 var total = 0;语句移出了 drop 事件,并从这里更改了赋值语句

total = parseFloat(myInt1 + myInt2 + myInt3);

这个

total += parseFloat(myInt1 + myInt2 + myInt3);

下面是一个工作示例 http://jsfiddle.net/axrwkr/RCzGn/

也应该能够做到这一点:

total += eval(myInt1) + eval(myInt2) + eval(myInt3);

这帮助我在一个不同的,但相似的情况下。