静态页面中只是做了一个静态的前台显示,代码是
<a href="javascript:;"></a><input type="text" class="fl inp-t" value="1"/><a href="javascript:;"></a>
想要把它变为按下左边可以增加,右边减少加一个script 和在原有代码上进行一些小修改
<a href="javascript:;" οnclick="subNum();"></a>
<input type="text" class="fl inp-t" name="count" id="count" value="1"/>
<a href="javascript:;" οnclick="addNum();"></a>
onclick 主要调用的script 中的点击事件的方法
<script type="text/javascript">
function addNum() {
document.getElementById("count").value = parseInt(document.getElementById("count").value) + 1;
}
function subNum() {
if (document.getElementById("count").value == "1") {
return;}
document.getElementById("count").value = parseInt(document.getElementById("count").value) - 1;}
</script>
当使用完此段代码之后会发现,每个商品的计数器都是不独立的,我们需要进行修改
要给他指定 固定的id
function addNum(inputId) {
document.getElementById(inputId).value = parseInt(document
.getElementById(inputId).value) + 1;
}
function subNum(inputId) {
if (document.getElementById(inputId).value == "1") {
return;
}
document.getElementById(inputId).value = parseInt(document
.getElementById(inputId).value) - 1;
}
<div class="chooseAmount">
<a href="javascript:void(0);"
th:onclick="${#strings.concat('subNum(').concat(cartsInfo.commodityId).concat(')')}"></a>
<input th:id="${cartsInfo.commodityId}" type="text" class="fl inp-t" value="1" />
<a href="javascript:void(0);"
th:onclick="${#strings.concat('addNum(').concat(cartsInfo.commodityId).concat(')')}"></a>
</div>