var x = 1;
$("#sinolo input").attr('value', x);
$("#inc").click(function(){
$("#sinolo input").attr('value', x++);
});
$("#dec").click(function(){
$("#sinolo input").attr('value', x--);
});
#sinolo{
width: 35%;
float: left;
}
#sinolo input{
width: 45%;
border: none;
text-align: center;
}
#sinolo button{
width: 25%;
font-size: 10px;
padding: 8px 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="sinolo">
<button id="dec" class="btn btn-info fa fa-minus pull-left"></button>
<input type="text" name="" value="">
<button id="inc" class="btn btn-info fa fa-plus pull-right"></button>
</div>
如您所见,我面临两个问题。
开始时,当我按下按钮时,过程会延迟,并在第二次点击时开始计数。
如果我按 +(加号)按钮,然后按 -(减号)按钮,进程无法正常运行。 我能做什么?
最佳答案
问题在于 ++
(increment operator)的行为不同,具体取决于它是在相关变量之前还是之后(--
decrement operator 是相同的)。放在变量后面,就像你一样,意思是“给我变量的值,然后把它加一”。放在变量之前(例如++x
),意思是“增加变量的值,然后给我新的值”。
因为您正在执行 x++
或 x--
,所以您在操作之前获取变量的值。使用 ++x
和 --x
,您的代码将正常工作。
var x = 1;
$("#sinolo input").attr('value', x);
$("#inc").click(function(){
$("#sinolo input").attr('value', ++x);
});
$("#dec").click(function(){
$("#sinolo input").attr('value', --x);
});
#sinolo{
width: 35%;
float: left;
}
#sinolo input{
width: 45%;
border: none;
text-align: center;
}
#sinolo button{
width: 25%;
font-size: 10px;
padding: 8px 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="sinolo">
<button id="dec" class="btn btn-info fa fa-minus pull-left"></button>
<input type="text" name="" value="">
<button id="inc" class="btn btn-info fa fa-plus pull-right"></button>
</div>
关于javascript - jQuery - 通过按钮增加和减少输入值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40812752/