jQuery 旋转类型的东西

Question

今天早些时候，我试图创建一个 jQuery spinner 类型的东西，有人给了我这段代码，它可以在单击按钮时向上/向下增加文本字段值。极好的。但是，如果该值为 0 - 零，您该怎么做才能禁用 .desc 按钮。在 PHP 中非常容易 if if <=0 then this 等等...但我不知道 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's。
如果我理解正确的话

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

当然，当值再次更改时必须重新启用这些。但我确信你能做到。