使用jstl优化评论星标html代码

2017-09-07  本文已影响15人  一一小知

评论需要加5颗星的功能,之前代码是这么写的:

<c:if
    test="${star_level == 1}">
    <i class="ys"></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
</c:if> <c:if
    test="${star_level == 2}">
    <i class="ys"></i>
    <i class="ys"></i>
    <i></i>
    <i></i>
    <i></i>
</c:if> <c:if
    test="${star_level == 3}">
    <i class="ys"></i>
    <i class="ys"></i>
    <i class="ys"></i>
    <i></i>
    <i></i>
</c:if> <c:if
    test="${star_level == 4}">
    <i class="ys"></i>
    <i class="ys"></i>
    <i class="ys"></i>
    <i class="ys"></i>
    <i></i>
</c:if> <c:if
    test="${star_level == 5}">
    <i class="ys"></i>
    <i class="ys"></i>
    <i class="ys"></i>
    <i class="ys"></i>
    <i class="ys"></i>
</c:if>
<c:if test="${curentCommentRecord == null || star_level == 0}">
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
</c:if>

是不是看着很冗余?如果是10颗星呢?那代码就更长了,也不好维护,看着不舒服,那咋优化呢?
如下:

<c:forEach begin='1' end="5" var='item'>
    <c:choose>
        <c:when test="${item <= star_level }">
            <i class="ys"></i>
        </c:when>
        <c:otherwise>
            <i></i>
        </c:otherwise>
    </c:choose>
</c:forEach>

效果出来了,棒棒哒。

image.png
上一篇 下一篇

猜你喜欢

热点阅读