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

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

---

业务 : 点击颜色加载对应的尺码

第四步 ： 编写颜色点击事件函数colorToRed

分析 ：点击所选颜色的a标签，触发点击事件colorToRed，此时需要遍历循环库存信息，然后对每一次循环做判断库存中的颜色color_id跟当前标签中颜色id相等，如果相等就在尺码的div中添加对应尺码

// 点击颜色
function colorToRed(target , colorId){
    // 先清空边框颜色为白色
    $("#colors div").attr("class","item");
    // 点击后边框变为红色
    $(target).attr("class","item selected");
    // 定义一个初始的尺码为空
    var html = "";
    /* =============在这里写jstl标签是在页面加载之前先加载=========== */
    <c:forEach items="${superPojo.skus }" var="sku">
        // 如果选中的颜色的id等于遍历时库存中的id
        if (colorId == '${sku.color_id}') {
            // 点击颜色加载尺码
            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>";
        }
    </c:forEach>
    /* =============在这里写jstl标签是在页面加载之前先加载=========== */
    // 填充尺码
    $("#sizes").html(html);
}