我如何使用jquery设置一个限制来增加和减少值
[英]how can i set a limit to increment and decrement of value using jquery
问题描述
i am trying to to make a quantity increase and decrease using jquery, it's working properly but if once value is 1 then how can i avoid decrements operation. 
我正在尝试使用jquery来增加和减少数量，它正在正常工作，但是如果一旦值为1，那么如何避免递减操作。 i tried using if else s=conditions but it's not sorted out please teach me... 我尝试使用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
Change increment/decrement functions like this. 像这样更改增量/减量功能。 You were using a value attribute on span but not incrementing/decrementing its value. 您在跨度上使用了value属性，但没有增加/减少其值。 Although its not neccesary but I felt that it should updated too. 尽管它不是必需的，但我认为它也应该更新。
$('#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
In you dec function ensure the value is greater than 1. Working Code here: 在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
You don't really need the multiplication, but just add an if statment. 您实际上并不需要乘法，而只需添加一个if语句。
$('#dec').click(function() {
$('.output').html(function(i, val) {
if(val > 1)
return val - 1;
});
});
As a ternary: 作为三元：
$('#dec').click(function() {
$('.output').html(function(i, val) {
return (val > 1) ? val - 1 : val;
});
});
解决方案4
0 2018-06-12 12:34:29
This is what you are looking for :D cheers 这就是您正在寻找的：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
Just check if the value is already 1 (or below, just in case) while you decrease. 减小数值时，只需检查该值是否已经为1（或以下数值，以防万一）。 In that case return simply 1 , otherwise go for the decreased value. 在那种情况下，简单地返回1 ，否则返回减小的值。 Note that multiplication * 1 is used as a means of parsing String to Number in your solution. 请注意，乘法* 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
You can use ternary operator like this: 您可以像这样使用三元运算符：
$('#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;
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.