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微調類型的東西

回答

相關問題