jQuery微调类型的东西

我想创建一个jQuery微调类型的东西今天早些时候有人给了我这个代码，它增加了文本字段值上/下按钮点击。太棒了。但是，如果值为0 - 零，则您如何禁用.desc按钮。在PHP很容易，如果< = 0那么这等等...但我不知道jQuery ..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" />

来源

2010-01-14 russell

你能格式化代码使其可读吗？ – Anurag 2010-01-14 14:34:23

尝试，但在这里仍然新工作'添加代码'方面似乎不断给我新行 – russell 2010-01-14 14:35:57

选择整个代码段，并按下命令+ k的mac和ctrl + k的窗口 – Anurag 2010-01-14 14:37:46

这里是我的代码，

$(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对样式进行样式设置以显示所需的样式。

这不是优化的代码，但应该给你一个如何让它按照你的要求工作的想法。

来源

2010-01-14 14:56:12

嗨利文斯顿，作品完美的直接开箱即可 - 布里尔。谢谢。 – russell 2010-01-14 15:21:20

严正jQuery的仍然是JavaScript，因此你为什么不使用

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

我的意思是，JavaScript有if的。如果我理解正确

来源

2010-01-14 14:42:27 Zenon

由于代码使用图像而不是按钮或输入元素，因此您不能真正禁用它。最容易做的事情是将其隐藏这将是：

$(":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-14 14:42:48 noah

你想当inc被点击时启用dec按钮（否则一旦它被禁用，将无法重新启用它）。 – GalacticCowboy 2010-01-14 14:53:10

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

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

来源

2010-01-14 14:58:25 Anurag

jQuery微调类型的东西

回答

相关问题