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