jq简单实现购物车加减功能

比眉伴天荒 2023-01-06 01:17 265阅读 0赞

![在这里插入图片描述][20210113153606726.png_pic_center]

<style> .num-input { height: 30px; } .num-input button { width: 22px; height: 100%; } .num-input input { width: 35px; height: 100%; text-align: center; } // 去除input number类型时自带的上下箭头 .num-input input::-webkit-outer-spin-button, .num-input input::-webkit-inner-spin-button { -webkit-appearance: none; } .num-input input[type="number"] { -moz-appearance: textfield; } </style>
    
    <div class="num-input">
        <button id="subVal">-</button>
        <input id="number" type="number" value="1" >
        <button id="addVal">+</button>
    </div>
    
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script> // 给input框声明一个变量 var n = $('#number') // 减 $('#subVal').click(function() { // parseInt() 转化为数字类型 console.log(parseInt(n.val())) if(parseInt(n.val()) < 1) { // 小于1时 默认恢复为1 n.val(1) } else if(parseInt(n.val()) > 1) { // 大于1时 点击减1 n.val(parseInt(n.val())-1) } else { // 小于1时 给减按钮添加一个禁止点击的状态 $('#subVal').attr('disabled','disabled') } }) // 加 $('#addVal').click(function() { if(parseInt(n.val()) < 1) { // 小于1时 默认恢复为1 n.val(1) } else { // 大于1时 点击加1 n.val(parseInt(n.val())+1) // 大于1时 解除减按钮禁止点击的状态 $('#subVal').removeAttr('disabled') } console.log(parseInt(n.val())) }) </script>

参考：https://blog.csdn.net/qq\_42354773/article/details/80974852

[20210113153606726.png_pic_center]: /images/20221119/b230a12c076745e0977fcc5be479a6bc.png

发表评论取消回复

表情：

评论列表（有 0 条评论，265人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue实现简单的购物车功能

前言我们在开发商城的过程中，购物车功能是必不可少的一项，比如我们现在比较流行的商城有淘宝，天猫，京东，小米，拼多多，唯品会，当当网等知名商城。那么你是否想过自己开发一

今天药忘吃喽~/ 2023年08月17日 15:39/ 0 赞/ 271 阅读

相关 Js实现购物车加减，价格计算等功能

需求说明： 1、单击“半闭”按钮时，关闭当前页面购物车页面 2、单击“移入收藏”弹出收藏提示 3、单击“删除”弹出确认删除提示 4、单击“结算”按钮，弹出结算

谁借莪１个温暖的怀抱￠/ 2023年06月07日 10:58/ 0 赞/ 97 阅读

相关 php购物车加减怎么做,vue2.0如何实现购物车的加减?

谢谢大家，问题已经解决了。正确的代码已经更新··· 想要拿到v-model.number="lists.buy\_num"这个的值，从而进行操作。新手哦，请不要给负分\`

缺乏、安全感/ 2023年01月17日 10:54/ 0 赞/ 206 阅读

相关 jq简单实现购物车加减功能

![在这里插入图片描述][20210113153606726.png_pic_center] <style> .num-input { height: 30px; }

比眉伴天荒/ 2023年01月06日 01:17/ 0 赞/ 266 阅读

相关一个简单的加减购物车数量的滚动动画

<template> <div class="cartcontrol"> <transition name="move">

迈不过友情╰/ 2022年12月08日 04:41/ 0 赞/ 194 阅读

相关简单学会用Vue实现购物车功能

首先，还是先把布局写好，和引入vue、bootstrap和准备vue实例，这个不多说，代码如下 <script src="./js/jquery-3.5.1.min.

超、凢脫俗/ 2022年10月16日 07:45/ 0 赞/ 310 阅读

相关 Session简单实现购物车功能

Session简单实现购物车功能这个小程序主要就3个页面，一个商品列表页面(HomeServlet)，一个是提示加入购物车页面(AddCartTipServlet)，一

ゝ一纸荒年。/ 2022年07月13日 18:39/ 0 赞/ 322 阅读

相关购物车功能实现

购物车功能的实现：一、创建购物车类：框架： 1. 购物车可以有很多不同种类的商品，可以将购物车传入泛型； 2. 定义一个Map类型 Map<T,Integer>

Dear 丶/ 2022年07月05日 15:07/ 0 赞/ 432 阅读

相关 Python Django实现简单购物车功能

-------------------- Django版本：1.11 操作系统：Windows Python：3.5 欢迎加入学习交流QQ群：657341423

太过爱你忘了你带给我的痛/ 2022年06月13日 03:27/ 0 赞/ 512 阅读

相关微信小程序-template使用：实现购物车商品数量加减功能

![6d50f13e89be234df6d84b9530415e7a.gif][] IT实战联盟博客：[http://blog.100boot.cn][http_blog.1

素颜马尾好姑娘i/ 2022年05月24日 07:53/ 0 赞/ 846 阅读