#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);
}
Я надеюсь, что это поможет вам..