jQuery Spinner类型的东西

前端之家收集整理的这篇文章主要介绍了jQuery Spinner类型的东西 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我今天早些时候试图创建一个jQuery Spinner类型的东西,有人给了我这段代码,它增加了单击按钮时文本字段的值.太棒了但是,如果值是0-0,您将如何禁用.desc按钮.在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" />
最佳答案
这是我的代码,

$(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设置按钮的样式以根据需要显示.

这不是经过优化的代码,但是应该使您了解如何使其按照您的要求工作.

猜你在找的jQuery相关文章