Несколько кнопок увеличения и уменьшения

В основном у меня есть четыре таймера, один для startTime и один для endTime. Время начала делится на startHour и startMin, и то же самое относится к endTime. Вот как я настроил startTime:

    htmlStr += "<tr><td><input type='button' id='startHourPlus' value='+' class='qtyplus' field='quantity' onClick='plusHour();' /><input type='button' id='startMinPlus' value='+' class='qtyplus' field='quantity' onClick='plusMin();' /><br/>";
htmlStr += "<input type='text' id='startHour' name='quantity' value='0' class='qty' /><input type='text' id='startMin' name='quantity' value='0' class='qty' /><br/>";
htmlStr += "<input type='button' id='startHourMinus' value='-' class='qtyminus' field='quantity'  onClick='minusHour();'/><input type='button' id='startMinMinus' value='-' class='qtyminus' field='quantity'  onClick='minusMin();' /></td>";

И для endTime:

htmlStr += "<td><input type='button' id='endHourPlus' value='+' class='qtyplus' field='quantity' onClick='plusHour();' /><input type='button' id='endMinPlus' value='+' class='qtyplus' field='quantity' onClick='plusMin();' /><br/>";
htmlStr += "<input type='text' id='endHour' name='quantity' value='0' class='qty' /><input type='text' id='endMin' name='quantity' value='0' class='qty' /><br/>";
htmlStr += "<input type='button' id='endHourMinus' value='-' class='qtyminus' field='quantity' onClick='minusHour();' /><input type='button' id='endMinMinus' value='-' class='qtyminus' field='quantity' onClick='minusMin();' /></td></tr>";

Когда нажимаются плюс и минус, они выполняют ту же функцию. Вот мой JavaScript:

function plusHour() {
e.preventDefault();
// Get the field name
fieldName = $(this).attr('field');
// Get its current value
var currentVal = parseInt($('input[name=' + fieldName + ']').val());
// If is not undefined
if (!isNaN(currentVal)) {
    // Increment
    if (currentVal < 24) {
        $('input[name=' + fieldName + ']').val(currentVal + 1);
    }
}
// Otherwise put a 0 there
$('input[name=' + fieldName + ']').val(0);
}
function plusMin() {
    e.preventDefault();
    // Get the field name
    fieldName = $(this).attr('field');
    // Get its current value
    var currentVal = parseInt($('input[name=' + fieldName + ']').val());
    // If is not undefined
    if (!isNaN(currentVal)) {
        // Increment
        if (currentVal < 60) {
            $('input[name=' + fieldName + ']').val(currentVal + 1);
        }
    }
    // Otherwise put a 0 there
    $('input[name=' + fieldName + ']').val(0);
}
function minusHour() {
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    fieldName = $(this).attr('field');
    // Get its current value
    var currentVal = parseInt($('input[name=' + fieldName + ']').val());
    // If it isn't undefined or its greater than 0
    if (!isNaN(currentVal) && currentVal > 0) {
        // Decrement one
        $('input[name=' + fieldName + ']').val(currentVal - 1);
    } else {
        // Otherwise put a 0 there
        $('input[name=' + fieldName + ']').val(0);
    }
}
function minusMin() {
    // Stop acting like a button
    e.preventDefault();
    // Get the field name
    fieldName = $(this).attr('field');
    // Get its current value
    var currentVal = parseInt($('input[name=' + fieldName + ']').val());
    // If it isn't undefined or its greater than 0
    if (!isNaN(currentVal) && currentVal > 0) {
        // Decrement one
        $('input[name=' + fieldName + ']').val(currentVal - 1);
    } else {
        // Otherwise put a 0 there
        $('input[name=' + fieldName + ']').val(0);
    }
}

Вот моя скрипка: Fiddle Первая и вторая - для startTime, последние две - для endTime.

Однако, когда я нажимаю кнопку увеличения и уменьшения во время начала или окончания, текстовое поле не показывает значение. Интересно, какую часть я сделал неправильно.

Заранее спасибо.


javascript html increment decrement
person Community    schedule 18.06.2014    source источник
comment
вы не можете просто получить значение, используя $(this).val() вместо var currentVal = parseInt($('input[name=' + fieldName + ']').val()); ?   -  person T J    schedule 18.06.2014
comment
скрипка действительно поможет.   -  person Yaje    schedule 18.06.2014
comment
Вот скрипт: jsfiddle.net/BPEC2   -  person    schedule 18.06.2014
comment
Всегда используйте parseInt со своим вторым параметром, чтобы убедиться, что вы не получаете взамен неожиданные значения. parseInt(myVal,10) для десятичных чисел.   -  person christian314159    schedule 18.06.2014

Ответы (4)


arrow_upward
0
arrow_downward

1) Удалить e.preventDefault();. Это предотвращает выполнение скрипта с ошибкой, так как нет объекта e.

2) Все ваши текстовые поля имеют одинаковое имя «количество». В коде вы получаете доступ к своему элементу, используя имя ввода. Разве это не двусмысленно? Какое входное значение он будет использовать? Измените его на идентификатор ввода, уникальный для текстовых полей.

person Ronnie    schedule 18.06.2014

arrow_upward
0
arrow_downward

  • Поскольку вы используете e.preventDefault();, вам нужно объявить e

    function plusHour() {
 e= window.event;

  • Кроме того, вы подключаете встроенный обработчик кликов, поэтому внутри обработчика this будет ссылаться на объект window. вам нужно явно передать ссылку на элемент следующим образом

    <input type='button' id='startHourPlus' value='+' class='qtyplus' field='quantity' onClick='plusHour(this);' />

    к которому вы можете получить доступ в функции, например

    function plusHour(elm) { //elm now refers to clicked element
 e= window.event;
 e.preventDefault();
 // Get the field name
 fieldName = $(elm).attr('field');

  • Тогда есть проблема с вашей логикой - в конце каждой функции вы просто устанавливаете значения текстового поля на 0,

    $('input[name=' + fieldName + ']').val(0);

    который должен быть внутри условия else.

JSFiddle

person T J    schedule 18.06.2014
comment
Но мне нужно установить его один за другим. не все сразу. Значит, мне нужно создать 8 методов вместо 4? - person ; 18.06.2014
comment
@ 9Dollars99Cents Однако, когда я нажимаю кнопку увеличения и уменьшения во время начала или окончания, в текстовом поле не отображается значение. Интересно, какую часть я сделал неправильно. Я надеюсь, что ответ охватывает вопрос. мы здесь не для того, чтобы запрограммировать для вас все приложение… вы просто задаете новые вопросы, основываясь на результате, который вы получили из ответа, который исправил текущие проблемы, даже не проголосовав за него… что совсем не обнадеживает, чтобы помочь вам дальше... - person T J; 18.06.2014

arrow_upward
0
arrow_downward

Попробуй это.

http://jsfiddle.net/puJ6G/849/

Я только что отредактировал ваш предыдущий пост, и я думаю, что это поможет вам.

это моя первая форма

<form id='myform1' method='POST' action='#'>
    <input type='button' value='-' class='qtyminus' field='quantity' />
    <input type='text' name='quantity' value='0' class='qty' />
    <input type='button' value='+' class='qtyplus' field='quantity' />
</form>

это моя вторая форма

<form id='myform2' method='POST' action='#'>
    <input type='button' value='-' class='qtyminus' field='quantity1' />
    <input type='text' name='quantity1' value='0' class='qty' />
    <input type='button' value='+' class='qtyplus' field='quantity1' />
</form>

Я меняю имя входов и поля, поэтому, когда пользователь нажимает кнопки, проход поля будет входами, где вы хотите изменить изменение значения.

Я надеюсь, что это поможет вам. просто посмотрите пример кода и проанализируйте его.

person Datz Me    schedule 18.06.2014
comment
Хорошо, конечно, большое спасибо. Я решил это, но я не думаю, что это лучшее решение, поскольку я повторяю функцию только для времени начала и окончания. - person ; 18.06.2014
comment
Это та же концепция. Важно то, что вы используете одну и ту же функцию на разных входных данных и получаете желаемый результат. - person Datz Me; 18.06.2014

arrow_upward
0
arrow_downward

Использование jQuery для создания одной функции для всех ваших операций:

$(document).ready(function(){

            $("#startHourPlus,#startMinPlus,#endHourPlus,#endMinPlus,#startHourMinus,#startMinMinus,#endHourMinus,#endMinMinus").click(function()
            {
                var operation = $(this).val(); // + or -
                var currentField = $("#" + $(this).attr("field"));              
                var currValue = parseInt(currentField.val());
                // Determine whether its PLUS or MINUS operation
                if(operation == "+")
                {               
                    if (!isNaN(currValue))
                    {   
                        // If its hours, limit it to 24 as max
                        if($(this).attr("field").contains("Hour"))
                        {
                            if(currValue < 24)
                                $(currentField).val(currValue+1);
                            else
                                $(currentField).val(0);
                        }
                        // If its mins, limit it to 60 as max
                        else if($(this).attr("field").contains("Min"))
                        {
                            if(currValue < 60)
                                $(currentField).val(currValue+1);
                            else
                                $(currentField).val(0);
                        }

                    }
                }
                else if(operation == "-")
                {
                    if (!isNaN(currValue) && currValue > 0) 
                        $(currentField).val(currValue-1);
                    else
                        $(currentField).val(0);
                }

            });
        });

=====================================================

И ваш HTML будет выглядеть примерно так, как показано ниже (добавлено несколько идентификаторов и удалено onClicks):

<table>
    <tr>
        <td>
            <input type='button' id='startHourPlus' value='+' class='qtyplus' field='txtstartHour'/>
            <input type='button' id='startMinPlus' value='+' class='qtyplus' field='txtstartMin' />
            <br/>
            <input type='text' id='txtstartHour' name='quantity' value='0' class='qty' />
            <input type='text' id='txtstartMin' name='quantity' value='0' class='qty' />
            <br/>
            <input type='button' id='startHourMinus' value='-' class='qtyminus' field='txtstartHour' />
            <input type='button' id='startMinMinus' value='-' class='qtyminus' field='txtstartMin' />
        </td>

        <td>
            <input type='button' id='endHourPlus' value='+' class='qtyplus' field='txtendHour' />
            <input type='button' id='endMinPlus' value='+' class='qtyplus' field='txtendMin' />
            <br/>
            <input type='text' id='txtendHour' name='quantity' value='0' class='qty' />
            <input type='text' id='txtendMin' name='quantity' value='0' class='qty' />
            <br/>
            <input type='button' id='endHourMinus' value='-' class='qtyminus' field='txtendHour' />
            <input type='button' id='endMinMinus' value='-' class='qtyminus' field='txtendMin' />
        </td>
    </tr>
</table>

Дайте мне знать, если это работает для вас. Демонстрация здесь

person Ronnie    schedule 19.06.2014
comment
Не уверен, почему это не работает. Я проверил это, прежде чем писать сюда. Попробуйте это jsfiddle.net/r5LL3/1 - person Ronnie; 19.06.2014
comment
Как все прошло @9Dollars99Cents? Вы смогли его протестировать? Если не через скрипку, вы можете скопировать и вставить приведенный выше код в свою локальную копию html и посмотреть. - person Ronnie; 19.06.2014
comment
Я решил это, инициировав каждый вход по другому идентификатору. Затем, когда происходит какое-либо событие, оно вызывает другой метод. Например, startHour плюс и минус, startMin плюс и минус и так для endHour и endMin. Всего у меня получилось 8 функций. Я не уверен, что это умный способ сделать это, но как-то это работает. Спасибо - person ; 19.06.2014
comment
Хм. Без сомнения, он будет работать как отдельные функции. Однако выше я создал единственную функцию, которая вызовет событие, как будто оно обрабатывает 8 разных кнопок. В любом случае, какой способ легче для вас понять, тот и лучше. Удачного кодирования. - person Ronnie; 19.06.2014
comment
Я хотел бы попробовать с одной функцией обрабатывать 8 разных кнопок. Но не могли бы вы заставить скрипку работать? - person ; 19.06.2014
comment
Fiddle все еще не работает для вас? Удивлен. Вы пробовали новый URL-адрес, который я пропинговал ранее? jsfiddle.net/r5LL3/1/embedded/result - person Ronnie; 19.06.2014