防止輸入數量在JQuery中變爲負數

我在當前網站上有一項功能，當您單擊加號按鈕或減號按鈕時，可以遞增和遞減值。由於它是作爲訂單數量在電子商務網站上的，因此如果選擇該值爲負值，則沒有多大意義。我試圖添加一些邏輯到我的jquery，這將防止價值成爲負面，但我的嵌套邏輯不工作出於某種原因。任何幫助將非常感激！防止輸入數量在JQuery中變爲負數

JQuery的

$(document).ready(function(e) { 

$('.up').on('click',function(){ 
      var num = $(this).parent().find('.input-quantity').val(); 
      $(this).parent().find('.input-quantity').val(parseInt(num)+1); 
     }); 
     $('.down').on('click',function(){ 
       var num = $(this).parent().find('.input-quantity').val(); 
      $(this).parent().find('.input-quantity').val(parseInt(num) -1); 
     }); 

});

HTML

<div class="quantity clearfix"> 
    <span>quantity:</span> 
      <div class="incre"> 
     <em class="down">-</em ><input type="text" value="1" class="input1 input-quantity "><em class="up">+</em ><br> 

</div> 
     <div class="clear"></div> 

    </div>

CSS

.quantity      {margin: 30px 0 0 0;max-width:242px;border: solid 1px #d3d2d2;padding: 3px 0 6px 11px;border-radius: 4px;} 
.quantity span     {display:inline-block;float:left;font-family:Arial, Helvetica, sans-serif;font-size: 14px;line-height: 20px;padding: 6px 0 0 0;color: #333333;} 
.incre     {display:inline-block;float:right;margin: 0;width: 39%;} 
.incre em     {display: inline-block;font-size: 26px;line-height: 31px;width: 29px;height: 29px;background: #cccccc;border-radius: 100%;color: #fff;padding: 0;float: left;text-align: center;margin: 0; cursor:pointer;} 
.incre .input1    {outline:none;border:0;display: inline-block;float: left;width: 20px;text-align: center;margin: 0 7px 0 3px;padding: 3px 0 0 0;font-size: 19px;height: 28px;line-height: 19px;color: #000;} 
.quantity small    {display:block;font-size: 18px;line-height: 20px;color: #000;padding: 0 12px 0 9px;}

我試過了：

我試過在我的jQuery中改變'down'按鈕的功能來說如果函數執行時值等於零，使值等於1並且遞減價值。這種黑客行爲會阻止價值永遠消極。

$('.down').on('click',function(){ 
      var num = $(this).parent().find('.input-quantity').val(); 
    if(num = 0){num = 1} 
     $(this).parent().find('.input-quantity').val(parseInt(num) -1); 
    });

我也試過：

if(num === "0"){num === "1"}

是遞減的價值，因爲它似乎是整數可能已經返回一個字符串的語句之前。

反正，任何幫助將不勝感激！

來源

2017-09-05 SDH

可以使用'' – azad

'' –

它應該是

if(num == 0) { 
    num = 1; 
}

代替num = 0

來源

2017-09-05 13:12:23

這工作！謝謝。那麼爲什麼==對比=會產生如此大的差異？ – SDH

很高興它的工作。在javascript中，你使用'=='或'==='來比較值（'==='用於類型檢查，你可以在這裏使用 - 例如'num ==='0''）。你可以閱讀更多 - https://developer.mozilla.org/en/docs/Web/JavaScript/Equality_comparisons_and_sameness –

使用輸入type=number，然後設置一個最小

<input type="number" min="0">

來源

2017-09-05 13:12:42

很酷的解決方案。我的格式有點搞砸了，因爲它在數字上加了箭頭。有什麼辦法可以禁用它嗎？ – SDH

不知道你的意思 - 但基本上這也讓你的箭頭也增加和減少，所以你不應該真的需要別的什麼 –

這裏有一些特定的設計規格。有沒有一種方法來設計箭頭的形狀或將它們移動到數字的兩側？ – SDH

防止輸入數量在JQuery中變爲負數

回答

相關問題