Question

我正在为响应式图像创建JSP标记文件，如果将该属性指定为true，则需要有条件地将该元素包装在父容器中。

为此，我刚刚在图像块的上方和下方写了c:choose > c:when语句，但我想知道，有更好的方法吗？

<c:choose>
    <c:when test="${not empty wrapper}">
        <div class="image-wrapper">
    </c:when>
</c:choose>

<img class="responsive-image ${lazyload == 'true' ? 'lazy-load' : ''} ${not empty additionalClasses ? additionalClasses : ''}" src="${ defaultSrc }" data-large="${ largeSrc }" data-small="${not empty smallSrc ? smallSrc : largeSrc}" alt="${ altTitle }" />

<c:choose>
    <c:when test="${not empty wrapper}">
        </div><%-- /wrapper --%>
    </c:when>
</c:choose>

完整的代码如下所示：

<%@ tag description="Universal image tag" language="java" pageEncoding="UTF-8" body-content="scriptless" trimDirectiveWhitespaces="true" %>
<%-- this tag should replace image.tag and responsiveimage.tag --%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%-- image object --%>
<%@ attribute name="obj" required="false" %>

<%-- to confirm and work with old tag --%>
<%@ attribute name="largeSrc" required="false" %>
<%@ attribute name="smallSrc" required="false" %>
<%@ attribute name="additionalClasses" required="false" %>
<%@ attribute name="id" required="false" %>
<%@ attribute name="alt" required="false" %>
<%@ attribute name="lazyload" required="false" %>
<%@ attribute name="wrapper" required="false" %>

<c:set var="defaultSrc" value="/assets/img/global/spacer.png" />
<c:set var="altTitle" value="${ not empty alt ? alt : '' }" />

<c:choose>
    <c:when test="${not empty obj}">
        <c:forEach var="image" items="${obj}" varStatus="i">
            <c:choose>
                <c:when test="${empty obj}">
                    <%-- need this to create nested choose --%>
                </c:when>
                <c:otherwise>

                    <c:choose>
                        <c:when test="${not empty image.screen}">
                            <c:choose>
                                <c:when test="${fn:containsIgnoreCase(image.screen, 'desktop')}">

                                    <c:url var="largeSrc" value="${image.src}"/>
                                    <c:set var="altTitle" value="${image.title}"/>
                                    <c:set var="alt" value="${image.alt}"/>

                                </c:when>
                                <c:when test="${fn:containsIgnoreCase(image.screen, 'mobile')}">

                                    <c:url var="smallSrc" value="${image.src}"/>

                                </c:when>
                            </c:choose>
                        </c:when>
                        <c:otherwise>
                            <c:choose>
                                <c:when test="${i.first}">

                                    <c:url var="largeSrc" value="${image.src}"/>
                                    <c:set var="altTitle" value="${image.title}"/>
                                    <c:set var="alt" value="${image.alt}"/>

                                </c:when>

                                <c:when test="${i.index == 1}">
                                    <c:url var="smallSrc" value="${image.src}"/>
                                </c:when>
                            </c:choose>
                        </c:otherwise>
                    </c:choose>
                </c:otherwise>
            </c:choose>
        </c:forEach>
    </c:when>
    <c:otherwise>
        <c:choose>
            <c:when test="${not empty largeSrc}">

            </c:when>
            <c:otherwise>
                <c:if test="${ not empty defaultSrc }">
                    <c:set var="largeSrc" value="${ defaultSrc }" />
                </c:if>
            </c:otherwise>
        </c:choose>
    </c:otherwise>
</c:choose>
<c:choose>
    <c:when test="${not empty wrapper}">
        <div class="image-wrapper">
    </c:when>
</c:choose>

<img class="responsive-image ${lazyload == 'true' ? 'lazy-load' : ''} ${not empty additionalClasses ? additionalClasses : ''}" src="${ defaultSrc }" data-large="${ largeSrc }" data-small="${not empty smallSrc ? smallSrc : largeSrc}" title="${ altTitle }" alt="${ altTitle }" />
<noscript><img src="${ largeSrc }" alt="${ altTitle }"></noscript>

<c:choose>
    <c:when test="${not empty wrapper}">
        </div>
    </c:when>
</c:choose>

Answer 1

不要认为有更好的方法，但你可以让它更简洁：

<c:if test="${not empty wrapper}"><div class="image-wrapper"></c:if>

<img class="responsive-image ${lazyload == 'true' ? 'lazy-load' : ''} ${not empty additionalClasses ? additionalClasses : ''}" src="${ defaultSrc }" data-large="${ largeSrc }" data-small="${not empty smallSrc ? smallSrc : largeSrc}" alt="${ altTitle }" />

<c:if test="${not empty wrapper}"></div></c:if><%-- /wrapper --%>

在JSP标记中创建条件HTML容器

1 个答案: