Question

我的jsp页面中有一个html片段，如果我启动该服务就可以正常工作，因为一切都是静态的。如下所示，我在div <div class="row templatemorow">中显示不同的图像。只有图像网址不同，所有其他类，字段都相同。

<div class="row templatemorow">
    <!-- How to generate these below div dynamically and just change the image url -- >
    <!-- First Image -->
    <div class="hex col-sm-6">
        <div>
            <div class="hexagon hexagon2 gallery-item">
                <div class="hexagon-in1">
                    <div class="hexagon-in2" style="background-image: url(images/gallery/1.jpg);">
                        <div class="overlay">
                            <a href="images/gallery/1.jpg" data-rel="lightbox" class="fa fa-expand"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Second Image -->
    <div class="hex col-sm-6">
        <div>
            <div class="hexagon hexagon2 gallery-item">
                <div class="hexagon-in1">
                    <div class="hexagon-in2" style="background-image: url(images/gallery/2.jpg);">
                        <div class="overlay">
                            <a href="images/gallery/2.jpg" data-rel="lightbox" class="fa fa-expand"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

现在我正试图让这个动态，因为我已经在地图中有image url所以我只需要弄清楚如何迭代这个地图并通过更改图片网址动态生成div <div class="hex col-sm-6">它？我在这里使用JSTL。

我有一个名为holder的字符串到字符串映射，其中键为title，值为full image url with http所以我需要迭代此holder映射并动态生成div不同的图像网址。所以，如果我在地图上有10个条目，那么我应该有10个div，其中class="hex col-sm-6"是动态生成的。

<div class="row templatemorow">
    <!-- How to generate these below div dynamically and just change the image url -- >

    <c:forEach var="e" items="${images.holder}">

    <!-- iterate holder map and generate div's accordingly -- >


</div>

我是JSTL的新手，所以我无法理解如何通过在JSP页面中迭代holder地图来动态生成这些div。

Answer 1

我不确定我是否理解最终的结果应该是什么，所以让我给你一些建议。

要迭代Map的条目并获取当前条目的值和键，我们将继续下一步：

<c:forEach var="entry" items="${myMap}">
  Key: <c:out value="${entry.key}"/>
  Value: <c:out value="${entry.value}"/>
</c:forEach>

所以这里例如，它会是这样的：

<c:forEach var="e" items="${images.holder}">
<div class="hex col-sm-6">
    <div>
        <div class="hexagon hexagon2 gallery-item">
            <div class="hexagon-in1">
                <div class="hexagon-in2" style="background-image: url(<c:out value="${e.value}"/>);">
                    <div class="overlay">
                        <a href="<c:out value="${e.value}"/>" data-rel="lightbox" class="fa fa-expand"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</c:forEach>

NB：这是为了让您的主要想法不是为您提供完整的解决方案。

Answer 2

您始终可以使用EL表达式来获取任何在lopping中的值。

<c:forEach items="${images.holder}" var="e">
           <div class="hex col-sm-6">
               <img src="${e.value}"/>
           </div>     
    </c:forEach>

上面的代码将生成“X”div，其中X是地图的长度。我们假设您的地图有3个值。这个值有它们的键。

然后您的JSP页面将生成3个div，如：

<div class="hex col-sm-6">
     <img src="img/blabla/mypng2.png"/>
</div> 
<div class="hex col-sm-6">
     <img src="img/blabla/mypng4.png"/>
</div> 
<div class="hex col-sm-6">
     <img src="img/blabla/mypng5.png"/>
</div>

如何通过在jsp页面中使用jstl迭代map来动态生成div？

2 个答案: