Кнопки увеличения и уменьшения JavaScript

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

По сути, я пытаюсь сделать кнопки увеличения и уменьшения. Когда текстовое значение достигнет 24, оно должно перестать увеличиваться. Вот HTML-коды:

 <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' />
  

Мой CSS:

 .qty {
    width: 40px;
    height: 25px;
    text-align: center;
}
input.qtyplus {
    width:25px;
    height:25px;
}
input.qtyminus {
    width:25px;
    height:25px;
}
  

И мой JavaScript:

 jQuery(document).ready(function(){
    // This button will increment the value
    $('.qtyplus').click(function(e){
        // 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 is not undefined
        if (!isNaN(currentVal)) {
            // Increment
            $('input[name=' fieldName ']').val(currentVal   1);
        } else {
            // Otherwise put a 0 there
            $('input[name=' fieldName ']').val(0);
        }
    });
    // This button will decrement the value till 0
    $(".qtyminus").click(function(e) {
        // 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) amp;amp; currentVal > 0) {
            // Decrement one
            $('input[name=' fieldName ']').val(currentVal - 1);
        } else {
            // Otherwise put a 0 there
            $('input[name=' fieldName ']').val(0);
        }
    });
});
  

Вот моя скрипка. Я получаю эту скрипку, исследуя. Интересно, есть ли какой-нибудь способ оформить все это как кнопку «Плюс» сверху, за которой следует текстовое поле, а затем кнопка «минус».

Кроме того, есть ли какой-либо способ установить ограничение на плюс и минус с помощью JavaScript? Потому что я установил оператор if ekse, но он не работает.

Комментарии:

1. просто поместите оператор if в свой if(!isNaN(currentval)), проверяя currentval и убедившись, что он меньше 23

2. Вы пробовали type='number' ?

3. Да, это работает. Но тогда как насчет css? Потому что я понятия не имею, как выровнять кнопку и текстовое поле по вертикали.

4. Существует несколько способов выравнивания этих элементов по вертикали, но я обновил скрипку одним из более простых способов. То есть, поместите разрыв (<br /> ) между входными элементами в html. Скрипка: jsfiddle.net/puJ6G/848

Ответ №1:

поместите этот код в свой if (!isNaN(currentVal) amp;amp; currentVal > 0)

if(currentVal === 24){
return;
}

РЕДАКТИРОВАТЬ: таким образом, если текущее значение вашего поля ввода равно 24, функция завершит работу.

Ответ №2:

В коде, который вы изначально вставили, часть «else if» не была достигнута, потому что часть «if (!isNaN …» уже была true. Как предложил ВороноиПотато в комментариях, вам нужно переместить сравнение в другое место. Например:

     if (!isNaN(currentVal) ) {
        if (currentVal < 24) {
            // Increment
            $('input[name=' fieldName ']').val(currentVal   1);
        }
    } else {
        // Otherwise put a 0 there
        $('input[name=' fieldName ']').val(0);
    }
  

Комментарии:

1. Конечно, спасибо. Но что касается части css, есть ли какое-либо свойство display css, которое выравнивало бы компоненты html в div по вертикали?

Ответ №3:

Я только что отредактировал ваш jsFiddle..

http://jsfiddle.net/puJ6G/847/

Это в вашем заявлении.. но мне просто интересно, хотите ли вы остановить последнее число 24 , или если число достигнет 24 , оно повернется 0 .

В коде здесь это просто остановится в 24

 if (currentVal == 24) {
            $('input[name=' fieldName ']').val(currentVal);
        }
        else if (!isNaN(currentVal) ) {
            // Increment
            $('input[name=' fieldName ']').val(currentVal   1);
        } 
        else {
            // Otherwise put a 0 there
            $('input[name=' fieldName ']').val(0);
        }
  

Но вы хотите повернуть 24 назад, чтобы 0 использовать это.

 if (!isNaN(currentVal) amp;amp; amp;amp; currentVal<24 ) {
      // Increment
$('input[name=' fieldName ']').val(currentVal   1);
} 
else {
// Otherwise put a 0 there
$('input[name=' fieldName ']').val(0);
}
  

Я надеюсь, что это поможет вам..