我正在尝试使用两个按钮来增加文本值,文本的每一侧各一个,将值增加 10 或减少 10,并且该值不能低于 10 公里或超过 90 公里。
这是应用程序屏幕,您可以明白我的意思:
更新:我现在已经获得了可使用的代码,但它在数字后没有“km”值,因此它变为 10、20、30 而不是 10km、20km、30km。有谁知道如何调整这段代码来做我想做的事?
<script language='javascript' type='text/javascript'>
$(document).ready(function(){
$("#increment").click(function(){
if($('#number').val() !="90"){
var $n = $("#number");
$n.val(Number($n.val())+10);
}
});
$("#decrement").click(function(){
if($('#number').val() !="10"){
var $n = $("#number");
$n.val(Number($n.val())-10);
}
});
});
</script>
</head>
<style>
.Radius{
font-size:14px;
font-family:"gillsans";
color: #4361AD;
text-align: center;
}
</style>
<body>
<div id="Maincontainer">
<input type="text" value="10" id="number" class="Radius" style="background-color:transparent; border:0px solid white; width:110px; margin-left:15px;"/>
<input type="button" id="increment" value="Increment"/>
<input type="button" id="decrement" value="decrement"/>
</div>
</body>
最佳答案
<!DOCTYPE>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
<div>
<body>
<input type="text" value="10Km" id="number"/>
<input type="hidden" value="10" id="number1"/>
<input type="button" id="increment" value="Increment"/>
<input type="button" id="decrement" value="decrement"/>
</body>
</div>
<script language='javascript' type='text/javascript'>
$(document).ready(function(){
$("#increment").click(function(){
if($('#number1').val() !="90"){
var $n = $("#number1");
$n.val(Number($n.val())+10);
var value = $n.val();
$("#number").val(value +'Km');
}
});
$("#decrement").click(function(){
if($('#number1').val() !="10"){
var $n = $("#number1");
$n.val(Number($n.val())-10);
var value = $n.val();
$("#number").val(value +'Km');
}
});
});
</script>
</body>
</html>
关于javascript - 如何使用两个按钮增加和减少文本值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29891666/