несколько полей ввода добавляют в другое поле ввода, которое контролирует ход загрузки полосы - PullRequest
Новая
       26

несколько полей ввода добавляют в другое поле ввода, которое контролирует ход загрузки полосы

0 голосов
/ 29 февраля 2012

У меня есть 4 поля ввода, которые, когда числа вводятся в одно из первых 3 с помощью jquery .keyup, суммируются и добавляются в четвертое.У меня также есть ряд операторов if else, которые выполняются, когда .keyup вводится в четвертый, они определяют значение .keyup и рисуют определенное количество путей (бутылок) к бумаге Рафаэля.

То, что я хочу сделать, - это когда одно из первых трех значений введено, я хочу, чтобы итоговое значение четвертого было передано в статистику if else, и решить, сколько путей (бутылок) следует отнести кРафаэль бумага.Вместо того, чтобы вводить текст непосредственно в четвертый вход.

Кажется, что .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);
    }

});

Ответы [ 2 ]

1 голос
/ 29 февраля 2012

Звоните 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/

0 голосов
/ 29 февраля 2012

Я понял это.Просто нужно переместить оператор if внутри функции updateTotal и передать ей переменную total.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() {


//});
...