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 相关文章推荐
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
网页中表单按回车就自动提交的问题的解决方案
Nov 03 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
JavaScript调用客户端Java程序的方法
Jul 27 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
详解如何用webpack4从零开始构建react开发环境
Jan 27 Javascript
js实现随机数小游戏
Jun 28 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
May 14 Javascript
JavaScript中跨域问题的深入理解
Mar 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
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
php格式化金额函数分享
2015/02/02 PHP
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
javascript 闭包详解
2015/07/02 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
js断点调试经验分享
2017/12/08 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
vue路由教程之静态路由
2019/09/03 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
python获取文件扩展名的方法
2015/07/06 Python
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
python常用函数详解
2016/09/13 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
python的flask框架难学吗
2020/07/31 Python
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
电子信息工程自荐信
2014/05/26 职场文书
个人自查自纠材料
2014/10/14 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
与死神共舞观后感
2015/06/15 职场文书
婚礼答谢词范文
2015/09/29 职场文书