我有多个数量微调器，它们只添加到第一个微调器，即使我点击最后一个微调器，它也会向第一个微调器添加1而不是最后一个微调器。
只有第一个微调器工作，其他微调器将值添加到第一个微调器。
<h2>Please Choose Truck:</h2>
<div id="trucks" class="container">
<div class="title">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
1 Ton Trucks
</a>
</h4> </div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="row">
<div class="col-md-4"> <img class="img-responsive img-hover" img src="images/3.jpg" alt="2t">
<i class="fa fa-info-circle fa-2x" aria-hidden="true" data-toggle="tooltip" data-placement="right"
title="Weight: Bims:"></i></div>
<div class="col-md-6">
<h3>Fridge Truck</h3>
<form>
<input type="checkbox" name="select" value="select"> </form>
<div class="qty">
<input type="button" onclick="decrementValue()" value="-" id="minus" />
<input type="text" name="quantity" value="1" maxlength="2" max="10" size="0" id="number" />
<input type="button" onclick="incrementValue()" value="+" id="plus" /> </div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4"> <img class="img-responsive img-hover" img src="images/3.jpg" alt="2t">
<i class="fa fa-info-circle fa-2x" aria-hidden="true" data-toggle="tooltip" data-placement="right"
title="Weight: Bims:"></i></div>
<div class="col-md-6">
<h3>Tractor Unit Truck</h3>
<form>
<input type="checkbox" name="select" value="select"> </form>
<div class="qty">
<input type="button" onclick="decrementValue()" value="-" id="minus" />
<input type="text" name="quantity" value="1" maxlength="2" max="10" size="0" id="number" />
<input type="button" onclick="incrementValue()" value="+" id="plus" /> </div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4"> <img class="img-responsive img-hover" img src="images/3.jpg" alt="2t">
<i class="fa fa-info-circle fa-2x" aria-hidden="true" data-toggle="tooltip" data-placement="right"
title="Weight: Bims:"></i></div>
<div class="col-md-6">
<h3>Curtainsiders Truck</h3>
<form>
<input type="checkbox" name="select" value="select"> </form>
<div class="qty">
<input type="button" onclick="decrementValue()" value="-" id="minus" />
<input type="text" name="quantity" value="1" maxlength="2" max="10" size="0" id="number" />
<input type="button" onclick="incrementValue()" value="+" id="plus" /> </div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4"> <img class="img-responsive img-hover" img src="images/3.jpg" alt="2t">
<i class="fa fa-info-circle fa-2x" aria-hidden="true" data-toggle="tooltip" data-placement="right"
title="Weight: Bims:"></i></div>
<div class="col-md-6">
<h3>Box Truck</h3>
<form>
<input type="checkbox" name="select" value="select"> </form>
<div class="qty">
<input type="button" onclick="decrementValue()" value="-" id="minus" />
<input type="text" name="quantity" value="1" maxlength="2" max="10" size="0" id="number" />
<input type="button" onclick="incrementValue()" value="+" id="plus" /> </div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
4 Ton Trucks
</a>
</h4> </div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<div class="row">
<div class="col-md-4"> <img class="img-responsive img-hover" img src="images/3.jpg" alt="2t">
<i class="fa fa-info-circle fa-2x" aria-hidden="true" data-toggle="tooltip" data-placement="right"
title="Weight: 3.5kg, 3.7kg Bims: 4.8 x 2.4 x2.5"></i></div>
<div class="col-md-6">
<h3>Fridge Truck</h3>
<form>
<input type="checkbox" name="select" value="select"> </form>
<div class="qty">
<input type="button" onclick="decrementValue()" value="-" id="minus" />
<input type="text" name="quantity" value="1" maxlength="2" max="10" size="0" id="number" />
<input type="button" onclick="incrementValue()" value="+" id="plus" /> </div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4"> <img class="img-responsive img-hover" img src="images/3.jpg" alt="2t"><i class="fa fa-info-circle fa-2x" aria-hidden="true" data-toggle="tooltip" data-placement="right"
title="Weight: 3.5kg, 3.7kg Bims: 4.8 x 2.4 x2.5"></i></div>
<div class="col-md-6">
<h3>Tractor Unit Truck</h3>
<form>
<input type="checkbox" name="select" value="select"> </form>
<div class="qty">
<input type="button" onclick="decrementValue()" value="-" id="minus" />
<input type="text" name="quantity" value="1" maxlength="2" max="10" size="0" id="number" />
<input type="button" onclick="incrementValue()" value="+" id="plus" /> </div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4"> <img class="img-responsive img-hover" img src="images/3.jpg" alt="2t"><i class="fa fa-info-circle fa-2x" aria-hidden="true" data-toggle="tooltip" data-placement="right"
title="Weight: 3.5kg, 3.7kg Bims: 4.8 x 2.4 x2.5"></i></div>
<div class="col-md-6">
<h3>Curtainsiders Truck</h3>
<form>
<input type="checkbox" name="select" value="select"> </form>
<div class="qty">
<input type="button" onclick="decrementValue()" value="-" id="minus" />
<input type="text" name="quantity" value="1" maxlength="2" max="10" size="0" id="number" />
<input type="button" onclick="incrementValue()" value="+" id="plus" /> </div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4"> <img class="img-responsive img-hover" img src="images/3.jpg" alt="2t">
<i class="fa fa-info-circle fa-2x" aria-hidden="true" data-toggle="tooltip" data-placement="right"
title="Weight: 3.5kg, 3.7kg Bims: 4.8 x 2.4 x2.5"></i></div>
<div class="col-md-6">
<h3>Box Truck</h3>
<form>
<input type="checkbox" name="select" value="select"> </form>
<div class="qty">
<input type="button" onclick="decrementValue()" value="-" id="minus" />
<input type="text" name="quantity" value="1" maxlength="2" max="10" size="0" id="number" />
<input type="button" onclick="incrementValue()" value="+" id="plus" /> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
//quantity JS
function incrementValue() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
if (value < 10) {
value++;
document.getElementById('number').value = value;
}
}
function decrementValue() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
if (value > 1) {
value--;
document.getElementById('number').value = value;
}
}
/* TRUCKS */
.panel-group {
position: relative;
left: 0px;
width: 900px;
font-family: 'Raleway', sans-serif;
}
.panel-default{
left: 0px;
position: absolute;
width: 900px;
}
.panel-title a{
color: #129cf3;
font-size: 25px;
text-align: center;
text-decoration: none;
border-collapse: collapse;
}
.panel-body i{
position: relative;
left: 150px;
bottom: 40px;
color: #129cf3;
}
.panel-body tooltip{
background: #000;
}
#trucks {
position: relative;
margin-top: -50px;
margin-left: 50px;
padding-bottom: 80px;
padding-left: 10px;
padding-top: 80px;
color: #129cf3;
font-family: 'Raleway', sans-serif;
}
#trucks .title {
text-align: center;
left: 150px;
}
/* QUANTITY STARTS */
.qty {
position: relative;
left: 150px;
bottom: 10px;
width: 50px;
height: 25px;
text-align: center;
}
#number {
position: relative;
left: 300px;
bottom: 50px;
width: 40px;
height: 25px;
text-align: center;
}
#minus {
position: relative;
left: 300px;
bottom: 50px;
width: 40px;
height: 25px;
text-align: center;
}
#plus {
position: relative;
left: 300px;
bottom: 50px;
width: 40px;
height: 25px;
text-align: center;
}
/* HORIZONTAL LINE @TRUCKS*/
hr {
display: block;
height: 1px;
width: 850px;
border: 0;
border-top: 1px solid #000;
margin: 5px 0;
padding: 0;
}
答案 0 :(得分：0)
所有元素都具有相同的ID，因此当您在文档级别选择时，它将始终返回第一个元素。此外，您的点击处理程序没有做任何事情来根据点击的行为来调整他们的行为。
但是，如果您要将onclick处理程序更改为incrementValue(this)和decrementValue(this)并使用这些略有修改的版本，我认为您会发现它的效果会更好。
function incrementValue(caller) {
var tEl = caller.parentElement.querySelector('#number');
var value = parseInt(tEl.value, 10);
value = isNaN(value) ? 0 : value;
if (value < 10) {
value++;
tEl.value = value;
}
}
function decrementValue(caller) {
var tEl = caller.parentElement.querySelector('#number');
var value = parseInt(tEl.value, 10);
value = isNaN(value) ? 0 : value;
if (value > 1) {
value--;
tEl.value = value;
}
}
有关工作代码和 minimal 完整示例的示例，请参阅codepen。