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

How to force addition instead of concatenation in javascript

提问by Maureen Moore

I'm trying to add all of the calorie contents in my javascript like this:

我正在尝试在我的 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);
        });
    });
});

Instead of adding the variables they get concatenated. I've tried using parseInt, parseFloat, and Number but I still just get concatenation and not addition. Please look at the view source at http://maureenmoore.com/momp_112412/121912_800.html

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

回答by SLaks

Your code concatenates three strings, then converts the resultto a number.

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

You need to convert each variableto a number by calling parseFloat()around each one.

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

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

回答by vapcguy

Should also be able to do this:

也应该能够做到这一点：

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

This helped me in a different, but similar, situation.

这在不同但相似的情况下帮助了我。

回答by vapcguy

The following statement appends the value to the element with the id of response

以下语句将值附加到 id 为 response

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

This makes it look like you are concatenating the strings, but you aren't, you're actually appending them to the element

这看起来像是在连接字符串，但实际上不是，您实际上是将它们附加到元素

change that to

将其更改为

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

You need to change the drop event so that it replaces the value of the element with the total, you also need to keep track of what the total is, I suggest something like the following

您需要更改放置事件，以便它用总数替换元素的值，您还需要跟踪总数是多少，我建议如下

$(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);
        });
    });
});

I moved the var total = 0;statement out of the drop event and changed the assignment statment from this

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

total = parseFloat(myInt1 + myInt2 + myInt3);

to this

对此

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

Here is a working example http://jsfiddle.net/axrwkr/RCzGn/

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