Вещь типа jQuery spinner

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

Также есть идеи, как его можно использовать для перемещения вверх/вниз по неупорядоченному списку 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" />

drop-down-menu jquery spinner increment
person russell    schedule 14.01.2010    source источник
comment
не могли бы вы отформатировать код, чтобы сделать его читабельным?   -  person Anurag    schedule 14.01.2010
comment
Попытка, но новая здесь, все еще работающая над аспектом «добавить код», кажется, продолжает давать мне новые строки   -  person russell    schedule 14.01.2010
comment
выделите весь фрагмент кода и нажмите command+k для mac и ctrl+k для windows   -  person Anurag    schedule 14.01.2010

Ответы (4)


arrow_upward
2
arrow_downward

вот мой код,

$(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, чтобы они отображались по мере необходимости.

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

person Livingston Samuel    schedule 14.01.2010
comment
Привет, Ливингстон, отлично работает прямо из коробки - блестяще. Спасибо. - person russell; 14.01.2010

arrow_upward
1
arrow_downward

хм, jQuery все еще javascript, так почему бы вам не использовать

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

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

person Zenon    schedule 14.01.2010

arrow_upward
0
arrow_downward

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

$(":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');
    }
person noah    schedule 14.01.2010
comment
Вы также хотели бы включить кнопку dec при нажатии inc (иначе не было бы возможности повторно включить ее после ее отключения). - person GalacticCowboy; 14.01.2010

arrow_upward
0
arrow_downward

Использование отдельных функций для обработки приращения и уменьшения от счетчика. Отключение будет работать только для элементов формы, но поскольку вы представляете элементы управления счетчиком с помощью изображений, вы можете вызвать для них .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");
}

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

person Anurag    schedule 14.01.2010