JQuery спиннер типа

Question

Я пытаюсь создать объект типа jQuery Spinner ранее сегодня, кто-то дал мне этот код, который увеличивает / уменьшает значение текстового поля при нажатии кнопки. Фантастика. Но что вы делаете, чтобы отключить кнопку .desc, если значение 0 - ноль. В PHP очень легко, если если <= 0, то это и так далее ... но я не знаю jQuery .. </p>

Также есть идеи, как его можно использовать для перемещения вверх / вниз по неупорядоченному списку html, т.е. ul li?

$(document).ready(function() 
{   
    $(function()
    {
        $(".inc").click(function() 
        { 
            $(":text[name='qty']").val(Number($(":text[name='qty']").val()) + 1);
        }); 

        $(".dec").click(function()
        {      
            $(":text[name='qty']").val(Number($(":text[name='qty']").val()) - 1);
        });  
    });
});

Используется форма:

<input type="text" name="qty" value="0" />
<img src="img/up.png" class="inc" width="20px" height="9px" alt="Increase" title="increase" />
<img src="img/down.png" class="dec" width="20px" height="9px" alt="Decrease" title="Decrease" />

Answer 1

вот мой код,

$(document).ready(function () {
  var textElem = $(":text[name='qty']"),
      getTextVal = function() {
        var val = parseInt(textElem.val(), 10);
        return isNaN(val) ? 0 : val;
      };

  $(".inc").click(function () {
      textElem.val(getTextVal() + 1);
  });

  $(".dec").click(function(){
      if( getTextVal() == 0) {
         return false;
      }

      textElem.val(getTextVal() - 1);
  });
});

Изображение '.dec' перестает уменьшаться, когда значение текстового элемента достигает 0, вы можете динамически добавлять и удалять имена классов для изображениячтобы пользователь мог заметить переход.

Для этих целей предлагается использовать кнопки, и их можно стилизовать с помощью css, чтобы они отображались по мере необходимости.

Это не оптимизированный код, нодолжен дать вам представление о том, как заставить его работать в соответствии с вашими требованиями.

Answer 2

эм jQuery по-прежнему является javascript, так почему бы вам не использовать

$(".dec")
    .click(
        function(){
            if(Number($(":text[name='qty']").val() > 0)
            {
                $(":text[name='qty']")
                    .val( Number($(":text[name='qty']").val()) - 1 
                );
            }
         }
     );

Я имею в виду, у javascript if. Если я вас правильно понял

Answer 3

Использование отдельных функций для обработки увеличения и уменьшения от счетчика. Отключение будет работать только для элементов формы, но, поскольку вы представляете элементы управления счетчика с помощью изображений, вы можете вызывать .hide() и .show() для них или пропустить действие в вызовах до increment и decrement.

function increment() {
    var textField = $(":text[name='qty']");
    var value = Number(textField.val()) + 1;
    textField.val(value);
}

function decrement() {
    var textField = $(":text[name='qty']");
    var value = Number(textField.val()) - 1;
    textField.val(value);
    if(value == 0) {
        $(".dec").attr("disable", "disable");
    }
}

$(document).ready(function() {
    $(".inc").click(increment);
    $(".dec").click(decrement);
});

Вы можете использовать этот счетчик для перемещения вверх или вниз по неупорядоченному списку, но вам придется отслеживать текущую позицию в списке. Функция decrement уже позаботится о том, чтобы она не опускалась ниже 0. Инкремент также необходимо отключить, если вы находитесь на последнем элементе в списке. Примерно так должно работать:

if(current == $("#list > li").size() - 1) {
    $(".inc").attr("disable", "disable");
}

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

Answer 4

Так как код использует изображение вместо кнопки или элемента ввода, вы не можете действительно отключить его. Самое простое, что можно сделать, это спрятать его:

$(":text[name='qty']").change(function() {
    if($(this).val() <= 0) {
        $(".dec").hide();
    } else {
        $(".dec").show();
    }
}):

Если вы измените «кнопку» уменьшения на элемент ввода или кнопки, вы можете изменить код функции на:

    if($(this).val() <= 0) {
        $(".dec").attr('disabled','disabled');
    } else {
        $(".dec").removeAttr('disabled');
    }