web-dev-qa-db-ja.com

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 のソースをご覧ください

jqueryscopeconcatenationaddition
43
Maureen Moore

コードは3つの文字列を連結し、resultを数値に変換します。

各変数の周りでparseFloat()を呼び出して、各変数を数値に変換する必要があります。

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

これもできるはずです：

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

これは別の、しかし似たような状況で私を助けました。

10
vapcguy

次の文は、responseのIDを持つ要素に値を追加します

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

これにより、文字列を連結しているように見えますが、実際には文字列を要素に追加しているわけではありません

それを変更する

$('#response').text(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;ステートメントをドロップイベントから移動し、割り当てステートメントをこれから変更しました

total = parseFloat(myInt1 + myInt2 + myInt3);

これに

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

これが実際の例です http://jsfiddle.net/axrwkr/RCzGn/

1
user1873471