0

4つの入力フィールドがあり、jquery .keyupを使用して最初の3つのうちの1つに数値を入力すると、それらが合計されて4番目に追加されます。また、4番目に.keyupが入力されたときに実行される一連のif elseステートメントがあり、それらは.keyupの値を決定し、ラファエル紙への特定の数のパス(ボトル)を描画します。

私がやりたいのは、最初の3つの値のいずれかが入力されたときに、4番目の合計をif elseステートメントに渡して、ラファエル紙に描画するパス(ボトル)の数を決定することです。4番目の入力に直接入力する代わりに。

カーソルが入力フィールドにない限り、.keyupはこれに対して機能しないようです。.textによって生成されている入力フィールドから情報を取得する別の方法は何ですか?基本的に私が探しているものです。

うまくいけば、これは理にかなっています。

http://jsfiddle.net/anderskitson/QX9C7/

$('#the_input_id').keyup(function() {
    updateTotal();
});

$('#the_input_id1').keyup(function() {
    updateTotal();
});

$('#the_input_id2').keyup(function() {
    updateTotal();
});

var updateTotal = function() {
    var input1 = parseInt($('#the_input_id').val());
    var input2 = parseInt($('#the_input_id1').val());
    var input3 = parseInt($('#the_input_id2').val());
    if (isNaN(input1) || isNaN(input2) || isNaN(input3)) {
        $('#total').text('');
    } else {
        var max = 300;
        var total = input1 + (input2 * 2) + (input3 * 3);

        if (total > max) {
            $('#total').text('The maximum is ' + max);
            $('#total1').val(500);
        } else {

            $('#total1').val(total);
        }


    }
};
var default_val = '';
$('input[class^="class-"]').focus(function() {
    if ($(this).val() == $(this).data('default_val') || !$(this).data('default_val')) {
        $(this).data('default_val', $(this).val());
        $(this).val('');
    }
});

$('input[class^="class-"]').blur(function() {
    if ($(this).val() == '') {
        $(this).val($(this).data('default_val'));
    }
});

var paper = Raphael(document.getElementById("notepad"), 400, 70);

function drawBottles(count) {
    for (i = 0; i < count; i++) {

        var randomNumber3 = Math.floor(Math.random() * 25);
        var path_a = paper.path("M242.07,270.119c0,0-14.596-30.606-7.625-35.793 c3.864-2.876,2.145-18.561,1.832-18.784c-0.313-0.224-1.839-0.319-1.839-0.319c-1.555-0.192-0.201-3.456-0.201-3.456 s0,0-0.598-0.352c-0.598-0.351,1.129-1.345,1.129-1.345c3.738-2.785,10.449-2.983,11.126-2.344c0.677,0.64-0.354,1.44-0.354,1.44 s0.73,0.832,1.333,2.111c0.604,1.28-0.792,1.665-0.792,1.665c1.852,6.718,9.877,14.935,9.877,14.935 c4.795,0.589,7.7,10.683,7.7,10.683l6.271,22.746C269.929,261.307,263.641,270.119,242.07,270.119z");
        path_a.attr({
            fill: 'none',
            stroke: '#231F20',
            "stroke-width": '3',
            "stroke-miterlimit": '10',
            'stroke-opacity': '1'
        }).data('id', 'path_a');
        path_a.translate((i * 30) - 225, -200);
        path_a.rotate(randomNumber3);

    } //end of for statement
}

$("#total1").keyup(function() {
    var val = $(this).val();
    if (val.length === 0) {
        paper.clear();
        $("#max").text('');
        return;
    }
    var value = parseInt(val);
    paper.clear();
    if (value > 300) {
        drawBottles(10);
        $("#max").text('you have reached the maximum');
    } else if (value > 270) {
        drawBottles(10);
    } else if (value > 240) {
        drawBottles(9);
    } else if (value > 210) {
        drawBottles(8);
    } else if (value > 180) {
        drawBottles(7);
    } else if (value > 150) {
        drawBottles(6);
    } else if (value > 120) {
        drawBottles(5);
    } else if (value > 90) {
        drawBottles(4);
    } else if (value > 60) {
        drawBottles(3);
    } else if (value > 30) {
        drawBottles(2);
    } else if (value != 0 && 0 != value.length) {
        drawBottles(1);
    }

});
4

2 に答える 2

1

の終わりに呼び出しkeyup()ます:$('#total1')updateTotal

var updateTotal = function() {
    var input1 = parseInt($('#the_input_id').val());
    var input2 = parseInt($('#the_input_id1').val());
    var input3 = parseInt($('#the_input_id2').val());
    if (isNaN(input1) || isNaN(input2) || isNaN(input3)) {
        $('#total').text('');
    } else {
        var max = 300;
        var total = input1 + (input2 * 2) + (input3 * 3);

        if (total > max) {
            $('#total').text('The maximum is ' + max);
            $('#total1').val(500);
        } else {

            $('#total1').val(total);
        }
    }

    $('#total1').keyup();  // This will trigger the keyup handler.
};

keyupこれにより、プログラムでフィールドのハンドラーが呼び出されます。

ここでjsfiddleに追加:http://jsfiddle.net/QX9C7/4/

于 2012-02-28T20:25:41.350 に答える
0

私はそれを考え出した。updateTotal関数内でifステートメントを移動し、合計変数を渡す必要があります。http://jsfiddle.net/anderskitson/K5Lqd/

$('#the_input_id').keyup(function() {
    updateTotal();
});

$('#the_input_id1').keyup(function() {
    updateTotal();
});

$('#the_input_id2').keyup(function() {
    updateTotal();
});

var updateTotal = function() {
    var input1 = parseInt($('#the_input_id').val());
    var input2 = parseInt($('#the_input_id1').val());
    var input3 = parseInt($('#the_input_id2').val());
    if (isNaN(input1) || isNaN(input2) || isNaN(input3)) {
        $('#total').text('');
    } else {
        var max = 300;
        var total = input1 + (input2 * 2) + (input3 * 3);

        if (total > max) {
            $('#total').text('The maximum is ' + max);
            $('#total1').val(300);
        } else {

            $('#total1').val(total);
            var val = total;
    if (val.length === 0) {
        paper.clear();
        $("#max").text('');
        return;
    }
    var value = parseInt(val);
    paper.clear();
    if (value > 300) {
        drawBottles(10);
        $("#max").text('you have reached the maximum');
    } else if (value > 270) {
        drawBottles(10);
    } else if (value > 240) {
        drawBottles(9);
    } else if (value > 210) {
        drawBottles(8);
    } else if (value > 180) {
        drawBottles(7);
    } else if (value > 150) {
        drawBottles(6);
    } else if (value > 120) {
        drawBottles(5);
    } else if (value > 90) {
        drawBottles(4);
    } else if (value > 60) {
        drawBottles(3);
    } else if (value > 30) {
        drawBottles(2);
    } else if (value != 0 && 0 != value.length) {
        drawBottles(1);
    }
        }


    }
};
var default_val = '';
$('input[class^="class-"]').focus(function() {
    if ($(this).val() == $(this).data('default_val') || !$(this).data('default_val')) {
        $(this).data('default_val', $(this).val());
        $(this).val('');
    }
});

$('input[class^="class-"]').blur(function() {
    if ($(this).val() == '') {
        $(this).val($(this).data('default_val'));
    }
});

var paper = Raphael(document.getElementById("notepad"), 400, 70);

function drawBottles(count) {
    for (i = 0; i < count; i++) {

        var randomNumber3 = Math.floor(Math.random() * 25);
        var path_a = paper.path("M242.07,270.119c0,0-14.596-30.606-7.625-35.793 c3.864-2.876,2.145-18.561,1.832-18.784c-0.313-0.224-1.839-0.319-1.839-0.319c-1.555-0.192-0.201-3.456-0.201-3.456 s0,0-0.598-0.352c-0.598-0.351,1.129-1.345,1.129-1.345c3.738-2.785,10.449-2.983,11.126-2.344c0.677,0.64-0.354,1.44-0.354,1.44 s0.73,0.832,1.333,2.111c0.604,1.28-0.792,1.665-0.792,1.665c1.852,6.718,9.877,14.935,9.877,14.935 c4.795,0.589,7.7,10.683,7.7,10.683l6.271,22.746C269.929,261.307,263.641,270.119,242.07,270.119z");
        path_a.attr({
            fill: 'none',
            stroke: '#231F20',
            "stroke-width": '3',
            "stroke-miterlimit": '10',
            'stroke-opacity': '1'
        }).data('id', 'path_a');
        path_a.translate((i * 30) - 225, -200);
        path_a.rotate(randomNumber3);

    } //end of for statement
}

//$("#total1").keyup(function() {


//});
于 2012-02-28T20:26:43.193 に答える