3

我今天早些时候试图创建一个 jQuery 微调器类型的东西，有人给了我这段代码，它在按钮单击时向上/向下增加文本字段值。极好的。但是，如果值为 0 - 零，您将如何禁用 .desc 按钮。在 PHP 中很容易 if <=0 then this etc...但我不知道 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" />
4

4 回答 4

2

这是我的代码，

$(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 设置它们的样式。

这不是优化的代码，但应该让您了解如何根据您的要求使其工作。

于 2010-01-14T14:56:12.647 回答
1

嗯 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. 如果我理解正确

于 2010-01-14T14:42:27.993 回答
0

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

$(":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');
    }
于 2010-01-14T14:42:48.510 回答
0

使用单独的函数来处理微调器的增量和减量。禁用仅适用于表单元素，但由于您使用图像表示微调器控件，因此您可以调用.hide()and .show()，或跳过调用 and 中的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");
}

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

于 2010-01-14T14:58:25.077 回答