點選按鈕實現文字框數字增加或者減少程式碼例項

螞蟻小編發表於2017-04-14

HTML5已經提供了這樣的控制元件，但是外觀實在不怎麼美觀，免費的東西通常不夠完美。

關於HTML5提供的控制元件可以參閱<input type="number" >用法簡單介紹一章節。

下面介紹一下如何使用javascript實現此功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.item-amount {
  width: 110px;
  height: 30px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.item-amount a {
  display: block;
  height: 28px;
  width: 30px;
  border: 1px solid #ccc;
  background: #f0f0f0;
  text-align: center;
  text-decoration: none;
  line-height: 28px;
  color: #444;
  position: absolute;
  top: 0;
}
.item-amount .minus,.item-amount .no-minus {
  border-radius: 5px 0 0 5px;
  left: 0;
}
.item-amount .plus,.item-amount .no-plus {
  border-radius: 0 5px 5px 0;
  right: 0;
}
.item-amount .no-minus,.item-amount .no-plus {
  color: #EAEAEA;
  border-color: #EAEAEA;
  background-color: #F7F6F6;
}
.item-amount .minus:hover, .item-amount .plus:hover {
  border-color: #acacac;
  background-color: #eaeaea;
}
.item-amount .no-minus:hover, .item-amount .no-plus:hover {
  color: #EAEAEA;
  border-color: #EAEAEA;
  background-color: #F7F6F6;
  cursor: default;
}
.text-amount {
  width: 46px;
  height: 26px;
  line-height: 30px;
  border-width: 1px 0;
  border-style: solid;
  border-color: #ccc;
  text-align: center;
  background-color: #fff;
  position: absolute;
  z-index: 2;
  left: 32px;
  top: 0;
  font-size:12px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function () {
  $(".item-amount a").click(function () {
    var count = $(this).attr("data");
    $("#itemAmount").val(function () {
      var value = $(this).val();
      count == "-" ? value-- : value++;
      if (value > 1) {
        $(".item-amount .minus").removeClass("no-minus");
        return value;
      }else if (value = 1) {
        $(".item-amount .minus").addClass("no-minus");
        var value = 1;
        return value;
      }
    })
  });
})
</script>
</head>
<body>
 <div class="item-amount ">
  <a href="javascript:void(0);" class="minus no-minus" data="-">-</a>
  <input type="text" value="1" id="itemAmount" class="text-amount">
  <a href="javascript:void(0);" class="plus" data="+">+</a>
</div> 
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(document).ready(function () {})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.$(".item-amount a").click(function () {})，為連結a註冊click事件處理函式。

（3）.var count = $(this).attr("data")，獲取連結的data屬性值。

（4）.$("#itemAmount").val(function () {})，設定文字框的value屬性值。

（5）.var value = $(this).val()，獲取當前文字框value屬性值。

（6）.count == "-" ? value-- : value++;，判斷點選的是哪個按鈕，然後決定是進行加運算還是減運算。

（7）.if (value > 1) {

  $(".item-amount .minus").removeClass("no-minus");

  return value;

}，如果value值大於1，那麼就移除no-minus樣式類。

（8）.else if (value = 1) {

  $(".item-amount .minus").addClass("no-minus");

  var value = 1;

  return value;

}，這個很有技巧，通過if後面的括號中的程式碼，順便將文字框的值設定為1。

二.相關閱讀:

（1）.attr()可以參閱jQuery attr()一章節。

（2）.val()可以參閱jQuery val()一章節。

（3）.removeClass()可以參閱jQuery removeClass()一章節。

（4）.addClass()可以參閱jQuery addClass()一章節。

相關文章