点击按钮实现文本框数字增加或者减少代码实例

快乐打工仔 分类:实例代码

HTML5已经提供了这样的控件,但是外观实在不怎么美观,免费的东西通常不够完美。

关于HTML5提供的控件可以参阅<input type="number" >用法简单介绍一章节。

下面介绍一下如何使用javascript实现此功能。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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()一章节。

点击按钮实现文本框数字增加或者减少代码实例,这样的场景在实际项目中还是用的比较多的,关于点击按钮实现文本框数字增加或者减少代码实例就介绍到这了。

点击按钮实现文本框数字增加或者减少代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容