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 相关文章推荐
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
Jul 10 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
分析JS单线程异步io回调的特性
Dec 01 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 Javascript
vue使用节流函数的踩坑实例指南
May 20 Vue.js
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中取得文件的后缀名?
2012/02/20 PHP
php调用Google translate_tts api实现代码
2013/08/07 PHP
总结对比php中的多种序列化
2016/08/28 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
jquery异步循环获取功能实现代码
2010/09/19 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
2017/02/08 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python GUI学习之登录系统界面篇
2019/08/21 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
幼儿园老师寄语
2014/04/03 职场文书
区级文明单位申报材料
2014/05/15 职场文书
关于美容院的活动方案
2014/08/14 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
社会实践活动报告
2015/02/05 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
小学校本教研总结
2015/08/13 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书