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

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);
}