jQuery, увеличивающий идентификатор и var по щелчку
Я пытаюсь сделать кнопку, которая увеличивает по щелчку его идентификатор и переменную. я смог найти некоторый код StackOverflow, который увеличивает значение поля ввода, но я не знаю для изменения его оттуда.
Вот Разметка:
<input type="text" name="qty" value="0" />
<p id="inc">Increase</p>
<p id="dec">Decrease</p>
И jQuery
<script>
$(document).ready(function()
{
$(function()
{
$("#inc").click(function()
{
$(":text[name='qty']").val(Number($(":text[name='qty']").val()) + 1);
$('#inc').addClass (Number + 1); // this one does not work
var incrementVar = (Number + 1); // this one also does not work
});
$("#dec").click(function()
{
$(":text[name='qty']").val(Number($(":text[name='qty']").val()) - 1);
});
});
});
</script>
Это действительно увеличивает val во входе, но я не могу добраться до инкремента $ ('#inc') класс и var incrementVar.
Что мне делать? Спасибо
3 ответа
var incrementVar = 0;
$(function() {
$("#inc").click(function() {
var value = parseInt($(":text[name='qty']").val()) + 1;
$(":text[name='qty']").val(value);
$('#inc').addClass('a' + value); // I believe class names cannot start with a number
incrementVar = incrementVar + value;
});
});
Имена классов не могут начинаться с числа, подробности см. В этом обсуждении . Если вы добавите к классу префикс .c1 , .c2 и т. Д., Вы можете сделать что-то вроде этого:
$(function() {
$("#inc").click(function() {
var num = $(":text[name='qty']").val(function(i, v) {
return Number(v) + 1;
}).val();
$(this).addClass ('c' + num);
var incrementVar = num;
});
$("#dec").click(function() {
$(":text[name='qty']").val(function(i, v) { return Number(v) - 1; });
});
});
Еще одно примечание: нет необходимости в $ ( document) .ready (function () { и $ (function () { они эквивалентны, можно обернуть любой из них.
Для дополнительной поддержки клавиатуры (стрелки вверх / вниз для добавления / вычитания) для этого ввода, мой Инкремент плагин может пригодиться: http://sean-o.com/increment
Просто скачайте и включите скрипт, затем вызовите с помощью одной строчки кода:
$(":text[name='qty']").increment({ increment: 1 });
- SEAN O
{{ 1}}