zoukankan      html  css  js  c++  java
  • 仿购物车加减数字

    html代码:

    <div class="gw_num">
        <em class="jian">-</em>
        <input type="text" value="1" class="num"/>
        <em class="add">+</em>
    </div>
    

    css样式:

    .gw_num{border: 1px solid #dbdbdb; 110px;line-height: 26px;overflow: hidden;}
    .gw_num em{display: block;height: 26px; 26px;float: left;color: #7A7979;border-right: 1px solid #dbdbdb;text-align: center;cursor: pointer;font-style:normal;}
    .gw_num .num{display: block;float: left;text-align: center; 52px;font-style: normal;font-size: 14px;line-height: 24px;border: 0;}
    .gw_num em.add{float: right;border-right: 0;border-left: 1px solid #dbdbdb;}
    

    js:

    $(document).ready(function(){
        //加的效果
        $(".add").click(function(){
            var n=$(this).prev().val();
    	var num=parseInt(n)+1;
    	if(num==0){ return;}
    	$(this).prev().val(num);
         });
    	//减的效果
         $(".jian").click(function(){
    	var n=$(this).next().val();
    	var num=parseInt(n)-1;
    	if(num==0){ return}
    	$(this).next().val(num);
         });
    })
    

    效果如下:
    这里写图片描述

  • 相关阅读:
    POJ 1095 Trees Made to Order 最详细的解题报告
    Producter and Consumer
    How to use the function of bind
    How to use the functions of apply and call
    Configurate vim tool
    #4713. 方程
    #4709. 树
    #4718. 管理
    #4710. 并
    #4707. 点分治
  • 原文地址:https://www.cnblogs.com/gaos/p/7767405.html
Copyright © 2011-2022 走看看