Javascript 为什么我的图像总是覆盖自己，而不是在for循环中显示每个图像？

我一直在尝试让我的图像在各自的表格单元格中正确显示，但是我的图像似乎只是在第一个单元格中相互覆盖，而不是在下一个单元格中打印

我已经看了一两天了，也许一双新的眼睛会发现这个问题

<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>

${tempMuscleGroup.description}

log（${tempMuscleGroup.name}）；
如果（${tempMuscleGroup.name}）==“Abdominals”）{
document.getElementById（“imageId”）.src=“/static/images/abs.jpg”；
}
如果（${tempMuscleGroup.name}）=“肱二头肌”）{
document.getElementById（“imageId”）.src=“/static/images/bicep.jpg”；
}
如果（${tempMuscleGroup.name}）=“犊牛”）{
document.getElementById（“imageId”）.src=“/static/images/calves.jpg”；
}
如果（${tempMuscleGroup.name}）==“胸部”）{
document.getElementById（“imageId”）.src=“/static/images/chest.jpg”；
}
如果（${tempMuscleGroup.name}）==“前臂”）{
document.getElementById（“imageId”）.src=“/static/images/armars.jpg”；
}
如果（${tempMuscleGroup.name}）=“Quads”）{
document.getElementById（“imageId”）.src=“/static/images/quads.jpg”；
}
如果（${tempMuscleGroup.name}==“肩部”）{
document.getElementById（“imageId”）.src=“/static/images/seal.jpg”；
}
如果（${tempMuscleGroup.name}）=“陷阱”）{
document.getElementById（“imageId”）.src=“/static/images/traps.jpg”；
}

主要问题是您试图使用相同的ID呈现多个项目-

imageId

。每个for循环创建一个脚本，该脚本使用ID

imageId

调用元素，并反复设置元素的ID，因为在HTML中ID是唯一的。您可能需要设置一个类

但还有另一个问题，这不是一个错误，但肯定是一个问题：

在后端，您有以下for循环：

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

你永远不会自己写这段代码，不是吗？当然不是。这一大块代码会对你的每一块肌肉重复。那又怎样

首先，您为这个简单操作添加了额外的6.704kb代码，这只是为了将代码重复8次。这听起来不多，但您正在添加

~n^2*105

字节，其中

n

是不需要的项目数

另外，也许更重要的是，它使代码在调试时变得难看和难以阅读

相反，在后端执行此操作-使用JSP代码以任何方式决定

src

应该是什么-拥有肌肉和图像源的预设常量

HashMap

，将图像源保存在数据库中，并在需要时使用这样的if语句拉取它们（由于它仍然臃肿，所以不推荐这样做）。您刚刚为自己节省了大量的杂乱内容&为用户节省了带宽：）

---

这样，就解决了您的bug（由于相同的id都是无效的HTML，所以仍然需要修复），因为您不需要动态获取图像，所以您所需要做的就是从

img

标记中删除

id

标记。您现在不需要动态引用它，因为这是从后端完成的。如果您这样做，我建议您设置一个类或一个唯一的id（可能从肌肉名称生成一个，如

img-{musclenamehere}

此代码似乎满足了我的需要，谢谢您的建议

    <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>

${tempMuscleGroup.description}

log（${tempMuscleGroup.name}）；
如果（${tempMuscleGroup.name}）==“Abdominals”）{
document.getElementsByClassName（“image”）[0].src=“/static/images/abs.jpg”；
}else如果（${tempMuscleGroup.name}）=“肱二头肌”）{
document.getElementsByClassName（“image”）[1].src=“/static/images/bicep.jpg”；
log（“内部BICSEPS”+“${tempMuscleGroup.name}”）；
}else如果（${tempMuscleGroup.name}）==“犊牛”）{
document.getElementsByClassName（“image”）[2].src=“/static/images/calves.jpg”；
}else如果（${tempMuscleGroup.name}）==“胸部”）{
document.getElementsByClassName（“image”）[3].src=“/static/images/chest.jpg”；
}else如果（${tempMuscleGroup.name}）==“前臂”）{
document.getElementsByClassName（“image”）[4].src=“/static/images/armers.jpg”；
}else如果（${tempMuscleGroup.name}）=“Quads”）{
document.getElementsByClassName（“image”）[5].src=“/static/images/quads.jpg”；
}else如果（${tempMuscleGroup.name}==“肩部”）{
document.getElementsByClassName（“image”）[6].src=“/static/images/seal.jpg”；
}else if（“${tempMuscleGroup.name}”==“Traps”）{
document.getElementsByClassName（“image”）[7].src=“/static/images/traps.jpg”；
}

图像的id是静态的，它是“imageId”对于每个图像，因此

gEBI

只找到第一个元素。我也尝试为每个tempMuscleGroup I循环创建一个标记，但是它仍然只打印循环第一次迭代中的所有图像，尽管它不会覆盖一个图像，因此在第一个肌肉组I循环下留下8个图像谢谢你的建议帮助我找到解决方案！我将在下面发布解决方案。

    <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>