jquery+json实现动态商品内容展示的方法


Posted in Javascript onJanuary 14, 2016

本文实例讲述了jquery+json实现动态商品内容展示的方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<mce:script type="text/javascript" src="jquery-1.4.4.min.js" mce_src="jquery-1.4.4.min.js"></mce:script>
<title>Example | xHTML1.0</title>
</head>
<mce:style><!--
div{width:50px;height:50px;float:left;margin:10px; text-align:center;}
.a{font-size:50px;float:left; cursor:pointer;}
.b{font-size:50px;background-color:yellow;float:left; cursor:pointer;}
.border{border:2px solid;}
.bb{}
--></mce:style><style mce_bogus="1">div{width:50px;height:50px;float:left;margin:10px; text-align:center;}
.a{font-size:50px;float:left; cursor:pointer;}
.b{font-size:50px;background-color:yellow;float:left; cursor:pointer;}
.border{border:2px solid;}
.bb{}</style>
<mce:script type="text/javascript"><!--
$(function () { 
   var _json = {"red":{"small":"10","middle":"15","large":"20","max_large":"25"},"blue":{"small":"33","middle":"35","large":"9","max_large":"30"},"green":{"small":"34","middle":"30","large":"19","max_large":"3"},"orange":{"small":"9","middle":"15","large":"29","max_large":"18"}};
   var _color_value;
   var _size_value;
   var _store_value;
  $("#select_color div").click(function () {
    $("#select_color div").attr("class","/bb");
    $(this).attr("class","border");
    _color_value = $(this).attr("date-value");
    change_span_value()
  });
  $("#select_size div").click(function () {
    $("#select_size div").attr("class","a");
    $(this).attr("class","b");
    _size_value = $(this).attr("date-value");
    change_span_value()
  });
  function change_span_value() {
    var _value = _json[_color_value][_size_value];
    if (_value != undefined) {
      $("#span_store").text(_value+"件");
    }
  }
});
// --></mce:script>
<body>
<div style="width:100%;margin:10px;" id="select_color">
<div style="background-color:red;cursor:pointer;" mce_style="background-color:red;cursor:pointer;" date-value="red">Red</div>
<div style="background-color:blue;cursor:pointer;" mce_style="background-color:blue;cursor:pointer;" date-value="blue">Blue</div>
<div style="background-color:green;cursor:pointer;" mce_style="background-color:green;cursor:pointer;" date-value="green">Green</div>
<div style="background-color:orange;cursor:pointer;" mce_style="background-color:orange;cursor:pointer;" date-value="orange">Orange</div>
</div>
<div style="width:100%;margin:10px;" id="select_size">
<div class="a" date-value="small">S</div>
<div class="b" date-value="middle">M</div>
<div class="a" date-value="large">L</div>
<div class="a" date-value="max_large">XL</div>
</div>
<div style="width:100%;margin:10px;text-align:left;" id="select_store">
库存:(<span id="span_store">1000件</span>)
</div>
<div style="border:2px solid;width:100px;height:100px;background-color:gray"></div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
获取JavaScript用户自定义类的类名称的代码
Mar 08 Javascript
Javascript读取cookie函数代码
Oct 16 Javascript
node.js中的path.normalize方法使用说明
Dec 08 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
JS document内容及样式操作完整示例
Jan 14 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 Javascript
jQuery遮罩层效果实例分析
Jan 14 #Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 #Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 #Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 #Javascript
jQuery div拖拽用法实例
Jan 14 #Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 #Javascript
分享jQuery插件的学习笔记
Jan 14 #Javascript
You might like
PHP以及MYSQL日期比较方法
2012/11/29 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
node.js 中间件express-session使用详解
2017/05/20 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
Python求导数的方法
2015/05/09 Python
用Python实现命令行闹钟脚本实例
2016/09/05 Python
python如何在循环引用中管理内存
2018/03/20 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
预备党员自我评价范文
2015/03/04 职场文书
2015年营业员工作总结
2015/04/23 职场文书
公司车辆管理制度
2015/08/04 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS