jquery json method to realize dynamic product content display

jquery json method to realize dynamic product content display_jquery

WBOY

Release： 2016-05-16 15:19:58

Original

1875 people have browsed it

The example in this article describes how jquery json implements dynamic product content display. Share it with everyone for your reference, the details are as follows:

<!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>

Copy after login

Readers who are interested in more content related to jQuery operating json can check out the special topic of this site: "A summary of jQuery operating json data techniques"

I hope this article will be helpful to everyone in jQuery programming.