我如何使用jquery設置一個限制來增加和減少值
[英]how can i set a limit to increment and decrement of value using jquery
問題描述
我正在嘗試使用jquery來增加和減少數量，它正在正常工作，但是如果一旦值為1，那么如何避免遞減操作。 我嘗試使用if else s = conditions，但沒有整理出來，請教我...
jQuery('#inc').click(function() { jQuery('.output').html(function(i, val) { return val*1+1 }); }); jQuery('#dec').click(function() { jQuery('.output').html(function(i, val) { return val*1-1 }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div class="row"> <div class="col-sm-1" id="dech"> <p id="dec">-</p> </div> <div class="col-sm-10"> <center><b><span class='output' value='1'>1</span> Adult</b></center> </div> <div class="col-sm-1" id="inch"> <p id="inc">+</p> </div> </div>
6 個解決方案
解決方案1
0 2018-06-12 12:32:32
像這樣更改增量/減量功能。 您在跨度上使用了value屬性，但沒有增加/減少其值。 盡管它不是必需的，但我認為它也應該更新。
$('#inc').click(function() {
$('.output').html(function(i, val) { return val*1+1 });
$('.output').attr("value",$('.output').html().trim())
});
$('#dec').click(function() {
if ($(".output").text().trim() === "1") return;
$('.output').html(function(i, val) { return val*1-1 });
$('.output').attr("value",$('.output').html().trim())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row"> <div class="col-sm-1" id="dech"> <p id="dec">-</p> </div> <div class="col-sm-10"> <center><b><span class='output' value='1'>1</span> Adult</b></center> </div> <div class="col-sm-1" id="inch"> <p id="inc">+</p> </div> </div> <script> $('#inc').click(function() { $('.output').html(function(i, val) { return val*1+1 }); $('.output').attr("value",$('.output').html().trim()) }); $('#dec').click(function() { if ($(".output").text().trim() === "1") return; $('.output').html(function(i, val) { return val*1-1 }); $('.output').attr("value",$('.output').html().trim()) }); </script>
解決方案2
0 2018-06-12 12:32:47
在dec函數中，請確保該值大於1。
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $('#inc').click(function() { $('.output').html(function(i, val) { return val*1+1 }); }); $('#dec').click(function() { $('.output').html(function(i, val) { if(val>1) return val*1-1 }); }); }); </script> </head> <body> <div class="row"> <div class="col-sm-1" id="dech"> <p id="dec">-</p> </div> <div class="col-sm-10"> <center><b><span class='output' value='1'>1</span> Adult</b></center> </div> <div class="col-sm-1" id="inch"> <p id="inc">+</p> </div> </div> </body> </html>
解決方案3
0 2018-06-12 12:33:21
您實際上並不需要乘法，而只需添加一個if語句。
$('#dec').click(function() {
$('.output').html(function(i, val) {
if(val > 1)
return val - 1;
});
});
作為三元：
$('#dec').click(function() {
$('.output').html(function(i, val) {
return (val > 1) ? val - 1 : val;
});
});
解決方案4
0 2018-06-12 12:34:29
這就是您正在尋找的：D干杯
jQuery('#inc').click(function() { jQuery('.output').html(function(i, val) { return val*1+1 }); }); jQuery('#dec').click(function() { jQuery('.output').html(function(i, val) { let _val; _val = val*1-1 ? val*1-1 : 1; return _val }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div class="row"> <div class="col-sm-1" id="dech"> <p id="dec">-</p> </div> <div class="col-sm-10"> <center><b><span class='output' value='1'>1</span> Adult</b></center> </div> <div class="col-sm-1" id="inch"> <p id="inc">+</p> </div> </div>
解決方案5
0 已采納 2018-06-12 12:37:01
減小數值時，只需檢查該值是否已經為1（或以下數值，以防萬一）。 在那種情況下，簡單地返回1 ，否則返回減小的值。 請注意，乘法* 1用作在解決方案中將String解析為Number的方法。
jQuery('#inc').click(function() { jQuery('.output').html(function(i, val) { return val * 1 + 1 }); }); jQuery('#dec').click(function() { jQuery('.output').html(function(i, val) { return val*1 <= 1 ? 1 : val * 1 - 1 }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div class="row"> <div class="col-sm-1" id="dech"> <p id="dec">-</p> </div> <div class="col-sm-10"> <center><b><span class='output' value='1'>1</span> Adult</b></center> </div> <div class="col-sm-1" id="inch"> <p id="inc">+</p> </div> </div>
解決方案6
0 2018-06-12 12:38:04
您可以像這樣使用三元運算符：
$('#inc').click(function () {
$('.output').html(function (i, val) {
return val * 1 + 1;
});
});
$('#dec').click(function () {
$('.output').html(function (i, val) {
return val > 1 ? val * 1 - 1 : val;
});
});
如何在極限過濾器中動態分配變量並動態增加/減少其值？
[英]How to assign variable and increment/decrement its value dynamically in limit filter?
如何設置最小 Increment ++ 和 Decrement -- 值（不能低於 1）+ 如何減少或增加按鈕附加值
[英]How to set minimum Increment ++ and Decrement -- value (can't go bellow 1) + how to decrease or increase button added value
如何在 React 中為增量和減量方法設置最大值和最小值
[英]How to set max and min value for increment and decrement methods inside React
如何在pointerdown和pointerup上增加和減少進度條值？
[英]How do I increment and decrement a progress bar value on pointerdown & pointerup?
如何通過快捷方式增加和減少字體大小？ （TinyMCE的）
[英]How can I increment and decrement the fontsize via shortcut? (tinymce)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.