Question

我有这个：

            <ul class="deposit" style="float:left;list-style-type:none;">
                <a href="javascript:void(0)" id="inc"><li class="first">+</li></a>
                <a href="javascript:void(0)" id="dec"><li class="second">-</li></a>
            </ul>

<div class="left deposit_amount">$<span id="amountSpan"></span></div>

我想这样做，所以每当我点击#inc时#amountSpan都会增加5.每当点击#dec时，该值将减少5。我也希望有，所以价值不能低于0。

目前我有这个：

  $(function(){
    $("#inc").click(function(){
      $("#amountSpan").val( Number($("#amountSpan").val()) + 5 );
    });
    $("#dec").click(function(){
      $("#amountSpan").val( Number($("#amountSpan").val()) - 5 );
    });
  });

但这不起作用。我怎么能得到这个？

提前致谢。

更新

我尝试设置一个最大数字，用：

$("#inc").click(function(){
  $("#amountSpan").text( Math.max(20, Number($("#amountSpan").text()) + 5) ) 
});

但它只是过了20岁。

Answer 1

使用.val()代替.text()（用于表单输入元素）。哦，当你递增时，你需要确保该值首先被强制为数字。（哦等你已经是： - ）

$(function(){
    $("#inc").click(function(){
      $("#amountSpan").text( Number($("#amountSpan").text()) + 5 );
    });
    $("#dec").click(function(){
      $("#amountSpan").text( Number($("#amountSpan").text()) - 5 );
    });
  });

保持金额大于或等于零：

    $("#amountSpan").text( Math.max(0, Number($("#amountSpan").text()) - 5) )

Answer 2

对于日期，您也可以按照以下示例进行年度

<script type="text/javascript">
    function increment1(myInput) {

        myInput.value = Math.min(31, (+myInput.value + 1) || 0);
    }
    function decrement1(myInput) {
        myInput.value = Math.max(1, (myInput.value - 1) || 0);
    }
    /*myInput.value = (myInput.value - 1) || 0;*/

</script>

<img src="Icalorieimage/account/increase_menu.png"
     width="25" height="20" id="target" style="float:left; cursor:pointer;" align="left"
     onclick="increment(this.parentNode.getElementsByTagName('input')[0]);"/>
<img src="Icalorieimage/account/decrease_menu.png" width="25" height="20" style="float:left; cursor:pointer;"
     align="left"
     onclick="decrement(this.parentNode.getElementsByTagName('input')[0]);"/>

jQuery - 增加/减少span的值

2 个答案: