如何在輸入字段填充時增加計數器值？

這是我的laravel檢視碼。在這裏，我正在嘗試增加計數器值（即，值=「0/5」）。我有模態內的輸入字段，當點擊模型內部的保存按鈕時，應根據填充的輸入字段增加值.ie（1/5..2/5 ..）如何在輸入字段填充時增加計數器值？

我試圖增加這些計數器value.But它顯示NaN的

var val; 
 
$("input").click(function() { 
 
    val = $('#counter').val(); 
 
    val++; 
 
    $('#counter').prop('value', val) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="panel-title pull-left"> 
 
    <i class="fa fa-check-circle" style="font-size:20px;color:lightgreen"> 
 
    </i> Price,stock and Shipping Information<input type="submit" id="counter" value="0/5" style="background-color: transparent; border:none"> 
 
</div>

來源

2017-08-16 suryakala velusamy

變化從「0/5」到「0」，然後重新嘗試它的價值屬性。 – tibetty

這工作！但我想要它爲0/5，並且需要用計數器值替換'0' –

您的意思是0滿分爲5？ – tibetty

<script type="text/javascript"> 
    $("input").click(function() { 
     let val = parseInt($('#counter').val().split('/')[0]); 
     $('#counter').prop('value', `${++val}/5`); 
    }); 
</script>

來源

2017-08-16 05:05:13 tibetty

對不起，沒有增加發生 –

我的錯誤，再試一次。 – tibetty

如果您想讓0-5作爲輪播，只需將$ {++ val}替換爲$ {++ val％6}即可。 – tibetty

其實你的代碼是工作的罰款。由於您的視圖僅在單擊事件中顯示或顯示，因此您應該使用jQuery「on」方法來增強您的點擊處理函數定義。在這種情況下，你應該有你的代碼工作

var val; 
 
$(document).on('click','#counter',function() 
 
{ 
 
    val = $('#counter').val(); 
 
    val++; 
 
    $('#counter').prop('value',val) 
 
});

<div class="panel-title pull-left"> 
 
<i class="fa fa-check-circle" style="font-size:20px;color:lightgreen"> 
 
</i> 
 
Price,stock and Shipping Information<input type="submit" id="counter" 
 
**value="0/5"** style="background-color: transparent; border:none"> 
 
    </div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

來源

2017-08-16 05:10:48

如果值是別的東西，那麼你的代碼將不能工作然後例如5/5的0/5 –

您可以使用正則表達式之前/字符

var val; 
$("input").click(function() { 
    val = $('#counter').val(); 
    qty = val.match(/[^/]*/i)[0]; 
    qty++; 
    $('#counter').prop('value', qty) 
});

來源

2017-08-16 05:13:31

它完全替換了這個值。我只是想增加這個1/5.2/5 –

你說的增量值，所以我遞增了它 –

來分析數據。如果你想增加這樣1/5..2/5。使用split並只增加上限值。

var val; 
 
$("input").click(function() { 
 
    val = $('#counter').val().split("/"); 
 
    //check eqal value with base 
 
    if(val[0] == val[1]) { 
 
    return false; 
 
    } 
 
    val[0]++; 
 
    
 
    $('#counter').prop('value', val[0]+"/"+val[1]); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="panel-title pull-left"> 
 
    <i class="fa fa-check-circle" style="font-size:20px;color:lightgreen"> 
 
    </i> Price,stock and Shipping Information<input type="submit" id="counter" value="0/5" style="background-color: transparent; border:none"> 
 
</div>

來源

2017-08-16 05:20:49

這裏是您的解決方案：

$("input").click(function() { 
    var val = $('#counter').val(); 
    $('#counter').prop('value', `${++val % 6}/5`); 
});

和工作小提琴：

https://jsfiddle.net/wv2x0mx5/4/

來源

2017-08-16 05:21:19

你也可以試試這個。

$("#counter").on("click",function(){ 
 
    var counterBtn = document.getElementById("counter"); 
 
    var count = counterBtn.value; 
 
    //alert(count.split("/")[0]); 
 
    count = count.split("/"); 
 
    counterBtn.value = ((parseInt(count[0])+1)%(parseInt(count[1])+1))+"/"+count[1]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="panel-title pull-left"> 
 
    <i class="fa fa-check-circle" style="font-size:20px;color:lightgreen"> 
 
    </i> Price,stock and Shipping Information<input type="submit" id="counter" value="0/5" style="background-color: transparent; border:none"> 
 
</div>

來源

2017-08-16 06:09:36 Lalit

如何在輸入字段填充時增加計數器值？

回答

相關問題