美文网首页
使用jstl优化评论星标html代码

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

作者: 一一小知 | 来源:发表于2017-09-07 17:25 被阅读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

相关文章

网友评论

      本文标题:使用jstl优化评论星标html代码

      本文链接:https://www.haomeiwen.com/subject/ssnijxtx.html