js中嵌入jstl标签的实战 : 第三卷

---

业务 : 首次点击颜色时默认选择该颜色对应的第一个尺码并显示价格

第六步 ： 修改颜色点击事件函数colorToRed

分析 ：当第一次进入product.jsp页面，第一次点击所选颜色的时候，默认给尺码添加一个该颜色对应的最小的尺码 ，并且显示该颜色该尺码下对应的价格

// 点击颜色function colorToRed(target , colorId){    // 先清空边框颜色为白色    $("#colors div").attr("class","item");    // 点击后边框变为红色    $(target).attr("class","item selected");    // 定义一个初始的尺码为空    var html = "";    // 第一次点击颜色时默认颜色对应的最小尺码被选中    // 第一次点击颜色给个标记     var flag = 0;    /* =============在这里写jstl标签是在页面加载之前先加载=========== */    <c:forEach items="${superPojo.skus }" var="sku">        // 如果选中的颜色的id等于遍历时库存中的id        if (colorId == '${sku.color_id}') {            // 点击颜色加载尺码            if (flag == 0) {                // 当颜色标记=0的时候,让选中尺码边框颜色变为红色                html = html + "<div class=\"item selected\" id=\"${sku.size}\" onclick=\"sizeToRed(this,'${sku.size}')\"><b></b><a href=\"javascript:;\" title=\"${sku.size}\" >${sku.size}</a></div>";                // 当颜色标记=0的时候,并取出对应的价格显示到价格中                $("#bbs-price").html('${sku.price}');                // 改变颜色标记为1                flag = 1;            }else{                // 当颜色标记!=0的时候,让选中的尺码边框颜色变为白色                html = html + "<div class=\"item\" id=\"${sku.size}\" onclick=\"sizeToRed(this,'${sku.size}')\"><b></b><a href=\"javascript:;\" title=\"${sku.size}\" >${sku.size}</a></div>";            }        }    </c:forEach>    /* =============在这里写jstl标签是在页面加载之前先加载=========== */    // 填充尺码    $("#sizes").html(html);}