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

前端技术 2023/09/06 JavaScript

本文实例讲述了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操作json相关内容感兴趣的读者可查看本站专题：《jQuery操作json数据技巧汇总》

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

本文地址：https://www.stayed.cn/item/14968

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案