Question

我正在尝试创建一个jQuery微调器类型的东西，今天有人给了我这个代码，它增加了按钮点击上/下的文本字段值。太棒了。但是，如果值为0 - 零，则如何禁用.desc按钮。在PHP非常容易，如果＆lt; = 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" />

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);
  });
});

当文本元素的值达到0时，图像'.dec'停止递减，您可以动态地添加和删除图像的类名，以便用户可以注意到转换。

建议使用按钮来实现此目的，并且可以使用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

由于代码使用的是图像而不是按钮或输入元素，因此无法真正禁用它。最简单的方法是隐藏它：

$(":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');
    }

Answer 4

使用单独的函数来处理微调器的递增和递减。禁用只适用于表单元素，但由于您使用图像表示微调控件，您可以在这些控件上调用.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");
}

当然，当值再次变化时，必须重新启用这些。但我相信你能做到。

jQuery微调器类型的东西

4 个答案: