`

Jquery快速实现数量加减

 
阅读更多
<!-- 快速实现数量加减 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
//获得文本框对象
var t = $("#text_box");
//初始化数量为1,并失效减
$('#min').attr('disabled',true);
 //数量增加操作
 $("#add").click(function(){ 
  // 给获取的val加上绝对值,避免出现负数
  t.val(Math.abs(parseInt(t.val()))+1);
  if (parseInt(t.val())!=1){
  $('#min').attr('disabled',false);
  };
 }) 
 //数量减少操作
 $("#min").click(function(){
 t.val(Math.abs(parseInt(t.val()))-1);
 if (parseInt(t.val())==1){
 $('#min').attr('disabled',true);
 };
 })
});
</script> 
</head> 
<body> 
<input id="min" name="" type="button" value="-" /> 
<input id="text_box" name="" type="text" value="1" style="width:30px;text-align: center"/> 
<input id="add" name="" type="button" value="+" /> 
</body> 
</html>

 



 

 

  • 大小: 15 KB
分享到:
评论

相关推荐

    jquery实现的数量加减插件源码.zip

    在jQuery中实现数量加减功能,主要是通过DOM操作和事件监听来完成的。 1. **DOM操作**:在HTML结构中,我们通常会有一个输入框(`&lt;input type="number"&gt;`)用于显示和编辑商品数量,以及两个按钮(一个增加,一个...

    jQuery购物车商品数量加减合计代码.zip

    在本案例中,我们关注的是一个使用jQuery实现的购物车商品数量加减及合计的代码实现,它提供了用户友好的交互体验。这个功能通常包括商品的增加、减少、删除以及总价的实时计算。下面我们将详细探讨这些关键知识点。...

    jquery.spinner一款jquery数字智能加减插件

    《jQuery Spinner:构建数字智能加减插件的深入解析》 在Web开发中,用户界面的交互性至关重要,而数字输入框(Spinner)是提升用户体验的一种常见方式。它允许用户通过点击按钮或直接输入数值来增加或减少数字,...

    jQuery输入框数值加减调整插件

    **jQuery输入框数值加减调整插件** 在Web开发中,常常需要实现用户交互式的数值输入功能,例如评分系统、年龄选择或者商品数量增减等。`jQuery输入框数值加减调整0到100插件`正是为了解决此类问题而设计的,它允许...

    jQuery商品数量数字加减代码.zip

    《jQuery商品数量数字加减代码实现详解》 在电商网站中,商品数量的选择是一个常见的功能,用户需要能够方便地增加或减少购物车中的商品数量。本文将深入解析一个基于jQuery的商品数量数字加减代码,该代码是利用...

    jQuery数字加减插件-数字加减框

    jQuery数字加减插件是一个增强网页表单输入体验的有效工具,尤其适合电商、库存管理等需要频繁调整数量的场景。通过结合Bootstrap或jQuery UI的样式,它可以轻松融入现有的项目中,提升用户界面的美观度和功能性。在...

    jQuery商品数量加减并计算总价代码.zip

    《jQuery实现商品数量加减与计算总价的代码详解》 在网页开发中,尤其是在电商网站上,用户在购物车操作商品数量的增加、减少以及实时计算总价是常见且重要的功能。这里我们关注的是一个基于jQuery实现的代码示例,...

    jQuery快速实现商品数量加减的方法

    本文将详细讲解如何使用 jQuery 快速实现商品数量加减的方法。 首先,我们需要在 HTML 页面中设置基本的结构。这里有一个包含两个按钮(一个用于减少数量,一个用于增加数量)和一个输入框(显示当前数量)的简单...

    jquery数字加减输入框插件

    本篇将详细介绍一款基于jQuery的数字加减输入框插件,它具有良好的Bootstrap框架兼容性,能快速将普通的input元素转变为功能完备的数量控制器。 ### 插件核心特性 1. **Bootstrap兼容性**:这款插件设计时考虑了与...

    jQuery仿淘宝天猫商品数量加减js代码

    在实现商品数量加减功能时,jQuery的高效性能和易用性使得开发者能够快速地创建动态和交互式的网页效果。 这个功能的实现通常包括以下几个步骤: 1. **HTML结构**:页面中需要有显示商品数量的元素,例如一个`...

    jquery实现input数字加减表格表单代码下载.zip

    总的来说,这个代码包提供了一个实用的jQuery示例,可以帮助开发者快速创建具有数字加减功能的表单,提高用户在网页上的交互体验。通过学习和理解这段代码,开发者可以更好地掌握jQuery和JavaScript在实际项目中的...

    jquery实现文本框数量加减功能的例子分享

    2. **数量加减**: - 定义两个函数`numAdd`和`numDec`分别处理商品数量的增加和减少。 - `numAdd`函数中,获取当前文本框的值,将其转换为整数并加1,然后更新文本框和总价。 - `numDec`函数中,同样获取当前值并...

    jQuery实现input数字加减代码.zip

    在这个"jQuery实现input数字加减代码"的压缩包中,我们可以看到一个功能,即通过bootstrap框架来创建一个可以进行数字增减的input输入框。这个功能在网页表单中非常实用,例如在购物车或者计数器应用中,用户可以...

    jQuery商品数量数字加减特效代码

    这里我们将深入探讨一个基于jQuery实现的此类功能,即“jQuery商品数量数字加减特效代码”。 jQuery,作为一个轻量级、高性能的JavaScript库,因其简洁的API和强大的功能,被广泛应用于网页交互设计。在这个案例中...

    jqueay实现商品数量加减

    在实现商品数量加减的功能时,jQuery的优势在于其简洁的API和强大的功能,可以帮助开发者快速编写出高效、易维护的代码。 首先,我们需要在HTML中设置一个结构,通常包括两个按钮(分别用于增加和减少数量)和一个...

    jQuery实现数字加减效果汇总

    无论是选择使用jQuery Spinner插件、基于Bootstrap的数字加减插件,还是jQuery UI的数字加减组件,这些工具都能够帮助开发者快速实现网页上的数字加减功能,提高用户体验。这些方法都涉及到了对HTML、CSS和...

    【ECSHOP插件】商品详情页、购物车页添加购买数量加减按钮

    这个插件的主题是“商品详情页、购物车页添加购买数量加减按钮”,它旨在优化用户在ECSHOP平台上的购物体验,使顾客能够更加便捷地调整选购商品的数量。 在商品详情页和购物车页增加购买数量的加减按钮,是一项对...

    jQuery实现的购物车物品数量加减功能代码

    通过使用jQuery,开发者能够快速实现购物车中商品数量加减功能,以及总价计算和按钮状态控制等功能。这些功能对于提升用户体验至关重要。同时,通过阅读和实践本文中的代码,开发者将能够更深入地理解jQuery事件处理...

    jQuery实现购物车数字加减效果

    三种方法各有千秋,左右加减数字方法适合希望快速实现简单加减效果的场景,而Bootstrap和jQuery UI风格则适合需要和各自框架保持视觉和交互统一的项目。通过本文介绍的三种实现购物车数字加减效果的方法,开发者可以...

Global site tag (gtag.js) - Google Analytics