Question

我一直试图让我的图像在各自的表格单元格中适当显示，但是看来我的图像只是在第一个单元格中相互覆盖，而不是在下一个单元格中打印。

我已经看了一两天了，也许新鲜的眼睛会发现问题所在。

<table class="table table-striped table-bordered">
    <c:forEach var="tempMuscleGroup" items="${musclegroups}">
        <tr>
            <td class="not_mapped_style" style="text-align: center">
                <a href="${pageContext.request.contextPath}/musclegroup/list/${tempMuscleGroup.name}/">${tempMuscleGroup.name} </a><br> ${tempMuscleGroup.description}<br>
                <img id="imageId" src="" />
            </td>
        </tr>

        <script type="text/javascript">
            console.log("${tempMuscleGroup.name}");

            if ("${tempMuscleGroup.name}" == "Abdominals") {
                document.getElementById("imageId").src = "/static/images/abs.jpg";
            }
            if ("${tempMuscleGroup.name}" == "Biceps") {
                document.getElementById("imageId").src = "/static/images/bicep.jpg";
            }
            if ("${tempMuscleGroup.name}" == "Calves") {
                document.getElementById("imageId").src = "/static/images/calves.jpg";

            }
            if ("${tempMuscleGroup.name}" == "Chest") {
                document.getElementById("imageId").src = "/static/images/chest.jpg";

            }
            if ("${tempMuscleGroup.name}" == "Forearms") {
                document.getElementById("imageId").src = "/static/images/forearms.jpg";
            }
            if ("${tempMuscleGroup.name}" == "Quads") {
                document.getElementById("imageId").src = "/static/images/quads.jpg";

            }
            if ("${tempMuscleGroup.name}" == "Shoulders") {
                document.getElementById("imageId").src = "/static/images/shoulder.jpg";
            }
            if ("${tempMuscleGroup.name}" == "Traps") {
                document.getElementById("imageId").src = "/static/images/traps.jpg";

            }
        </script>

    </c:forEach>
</table>

Answer 1

主要问题是您尝试渲染具有相同ID-imageId的多个项目。每个for循环都创建一个脚本，该脚本调用ID为imageId的元素，并一次又一次地设置其ID，因为在HTML中， ID是唯一的。您可能要设置一个类。

但是还有另一个问题，这不是一个错误，但绝对是一个问题：

在您的后端，您有这个for循环：

<c:forEach var="tempMuscleGroup" items="${musclegroups}">

这将n次（对于n个肌肉群）中的代码进行渲染。然后，在每次渲染时，放置一个脚本，其中包含许多ifs以便进行简单检查。 不良练习！为什么？因为您通过后端渲染图像，然后要求前端确定它是哪张图片，所以增加了代码量。呈现的代码如下：

if ("Biceps" == "Abdominals") {
    document.getElementById("imageId").src = "/static/images/abs.jpg";
}
if ("Biceps" == "Biceps") {
    document.getElementById("imageId").src = "/static/images/bicep.jpg";
}
if ("Biceps" == "Calves") {
    document.getElementById("imageId").src = "/static/images/calves.jpg";

}
if ("Biceps" == "Chest") {
    document.getElementById("imageId").src = "/static/images/chest.jpg";

}
if ("Biceps" == "Forearms") {
    document.getElementById("imageId").src = "/static/images/forearms.jpg";
}
if ("Biceps" == "Quads") {
    document.getElementById("imageId").src = "/static/images/quads.jpg";

}
if ("Biceps" == "Shoulders") {
    document.getElementById("imageId").src = "/static/images/shoulder.jpg";
}
if ("Biceps" == "Traps") {
    document.getElementById("imageId").src = "/static/images/traps.jpg";
}

您永远不会自己编写此代码，不是吗？当然不是。而且，您的每一块肌肉都会重复执行大量的代码。 那又怎样？

首先，您为此简单操作添加了额外的6.704kb代码，仅用于重复此代码8次。听起来不多，但是您要添加~n^2*105个字节，其中n是项数，而不必要。

另外，也许更重要的是，它使调试时呈现的代码难看且难以阅读。

相反，请在后端执行此操作-使用您的JSP代码来决定src应该以何种方式进行操作-拥有预设的HashMap肌肉和图像源常量，保存数据库中的图像源，并在需要时使用此类if语句将其拉出（不建议这样做，因为它仍然很肿）。您只是为自己节省了很多混乱，为用户节省了带宽：）

这样，就可以解决您的错误（由于相同的ID都是无效的HTML，因此仍应修复），因为您不需要动态获取图片，因此您需要做的就是删除{{1 }}标签从您的id标签中移除。您实际上并不需要一种方法来动态引用它，因为这是从后端完成的。如果这样做，我建议您设置一个类或一个唯一 id（可能从肌肉名称生成一个，例如img。

Answer 2

此代码似乎可以满足我的需求，谢谢所有的建议！

    <table class="table table-striped table-bordered">
    <c:forEach var="tempMuscleGroup" items="${musclegroups}">
        <tr>
            <td class="not_mapped_style" style="text-align: center"><a
                href="${pageContext.request.contextPath}/musclegroup/list/${tempMuscleGroup.name}/">
                    ${tempMuscleGroup.name} </a><br> ${tempMuscleGroup.description}<br>

                <img id="imageId" class="image" src="" /></td>
        </tr>
        <script type="text/javascript">
            console.log("${tempMuscleGroup.name}");

            if ("${tempMuscleGroup.name}" == "Abdominals") {
                document.getElementsByClassName("image")[0].src = "/static/images/abs.jpg";

            } else if ("${tempMuscleGroup.name}" == "Biceps") {
                document.getElementsByClassName("image")[1].src = "/static/images/bicep.jpg";
                console.log("INSIDE BICSEPS" + "${tempMuscleGroup.name}");
            } else if ("${tempMuscleGroup.name}" == "Calves") {
                document.getElementsByClassName("image")[2].src = "/static/images/calves.jpg";

            } else if ("${tempMuscleGroup.name}" == "Chest") {
                document.getElementsByClassName("image")[3].src = "/static/images/chest.jpg";

            } else if ("${tempMuscleGroup.name}" == "Forearms") {
                document.getElementsByClassName("image")[4].src = "/static/images/forearms.jpg";
            } else if ("${tempMuscleGroup.name}" == "Quads") {
                document.getElementsByClassName("image")[5].src = "/static/images/quads.jpg";

            } else if ("${tempMuscleGroup.name}" == "Shoulders") {
                document.getElementsByClassName("image")[6].src = "/static/images/shoulder.jpg";
            } else if ("${tempMuscleGroup.name}" == "Traps") {
                document.getElementsByClassName("image")[7].src = "/static/images/traps.jpg";
            }
        </script>
    </c:forEach>
</table>

为什么我的图像不断覆盖自身而不是在for循环中显示每个图像？

2 个答案: