电商笔记-09(点击不同的颜色,显示不同的尺码.点击不同的尺码,显示不同的价格)

复杂功能的逻辑分析

显示颜色.点击不同的颜色,显示不同的尺码.点击不同的尺码,显示不同的价格

         此时页面已经拥有商品详情中所需要的全部数据

• 使用c标签的循环,将此商品的所有颜色全部显示出来.

• 当点击某一个颜色时,会触发点击事件,此事件会携带当前标签对象,和选中的颜色id.在js代码中嵌入C循环的标签代码,用EL表达式取出装有sku的库存集合.
  在循环中判断取出用户点击颜色与库存中对应的记录,这样就可以获取,属于此颜色下的所有尺码了.找到显示尺码标签对象的上一级标签,拼接尺码.

• 用户第一次进入展示详情页面,默认选中第一个颜色,和第一个尺码.$(“#colors div:first”).click();可以解决第一个颜色问题.因为在页面进行之后,已经默认选中一个颜色了,那么第一个尺码,可以在循环中判断选中的第一个颜色与库存对等的第一个尺码.将此条尺码默认选中.

• 这个需要用户选择的颜色id与库存表中的颜色id对应,而且 还要用户选择的尺码,要与库存表中的尺码对应,才可以确定具体的价格.循环中获取用户当前选择的颜色id,赋值给全局变量.用户点击尺码,可以获取用户当前选中的具体尺码.重新重新嵌入C循环的标签代码,循环库存,且的方式判断两个条件成立的记录.取出对应的价格,动态添加到价格显示框中.

superPojo:页面详情所需的数据

superPojo.map:对应商品的颜色ID和颜色

HTML

    <!-- ---------------------根据用户点击的商品id显示此商品下的所有颜色---------------------------------->            <div id="choose" class="clearfix p-choose-wrap">                <div id="choose-color" class="li choose-color-shouji p-choose">                    <div class="dt">选择颜色：</div>                    <div class="dd" id="colors">                    <!-- 循环显示 -->                        <c:forEach items="${superPojo.map }" var="color" varStatus="i">                            <div class="item" onclick="colorToRed(this,'${color.key}')">                                <b></b>                                 <a href="javascript:;"  title="${color.value }">                                 <img data-img="1" src="/   images/53f44cc2N0b714cb2_002.jpg" alt="" height="25"    width="25" />                                    <i>${color.value }</i>                                </a>                            </div>                        </c:forEach>                    </div>                </div>    <!-- ---------------------根据颜色显示尺码---------------------------------->                <div id="choose-version" class="li p-choose">                    <div class="dt">选择尺码：</div>                    <div class="dd" id="sizes">                    </div>                </div>

JS -> js中可以嵌套C标签/标签.

var color_id= "";//选中颜色显示红色框function colorToRed(item,colorId){    color_id = colorId;    var html = "";    //标签循环    <c:forEach items="${superPojo.superPojos}" var="sku" varStatus="i">    //循环判断用户选择的颜色ID与库存中相等的颜色id,为true就将当前颜色id对应的尺码添加到标签    if(colorId == '${sku.color_id}'){            html += "<div class=\"item\" id=\"S\" onclick=\"sizeToRed(this,'${sku.size}')\"><b></b><a href=\"javascript:;\" title=\"S\" >${sku.size}</a></div>";    }    </c:forEach>    //将选中的当前颜色的下的尺码添加到页面    $("#sizes").html(html);    //清除全部红色框框    $("#colors div").attr("class","item");    //添加重新选择的框框    $(item).attr("class","item selected");    //第一次点击颜色时,默认选中第一条尺码    $("#sizes div:first").click();}    //如果选择的是S码function sizeToRed(item, size){    //清除全部红色框框    $("#sizes div").attr("class","item");    //添加重新选择的框框    $(item).attr("class","item selected");    //标签循环    //循环判断当前颜色和尺码对应的库存记录,才可以获取对应的价格并动态显示    <c:forEach items="${superPojo.superPojos}" var="sku" varStatus="i">        if(size == '${sku.size}' && color_id == '${sku.color_id}'){        $("#bbs-price").text("${sku.price}");        }    </c:forEach>}//頁面加载完毕执行 使用显示排在第一的颜色 ,和排在第一的尺码$(function(){    $("#colors div:first").click();})