jsp中使用foreach


<c:forEach items="${movieList }" var="li" varStatus="status" end="21">
    <ul>
        <li>${li.movieId}</li>
        <li>
            <image id="img" src="images/${li.img}"></image>
        </li>
        <li>${li.title}</li>
        <li style="width: 160px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden">${li.genres}</li>
        <li>
            <button id="souce">评分预测</button>
            <button id="buyCar">加入购物车</button>
        </li>
    </ul>
</c:forEach>

</body>
<script>
$(function (){
    $("#buyCar").click(function (){
        alert("添加成功")
    })
})
</script>

为什么在网页点击加入购物车，只有第一个可以弹出提示“添加成功”，其他的都没有反应。

img

就第一个有反应，点击其他的加入购物车就没有反应

同一个 html 或者 jsp 文档里， id选择器 只能有一个，如果有多个 ，jqueyr获取这个 id，只会返回 第一个匹配的元素；
所以你的 点击事件的绑定，只绑定了第一个匹配到的元素
解决：

  • 你可以换成 class 选择器，这个支持多个
  • id 选择器 后面追加 数字区分，比如 id = "buyCar1"

这段代码使用了 JSP 的 JSTL 标签库来实现循环输出电影列表。循环语句中使用了 var 属性来定义循环变量，并使用 items 属性来指定要遍历的集合。其中，${movieList} 表示 JSP 页面中传入的电影列表，li 表示当前迭代的元素，status 表示迭代状态，end 属性表示迭代结束条件。

在循环语句的主体中，使用了 ul 和 li 标签来显示每个电影的信息，并使用 JSP EL 表达式 ${li.movieId}、${li.img}、${li.title} 和 ${li.genres} 来获取当前电影的属性值。该循环还使用了 c:forEach 标签库中的 varStatus 属性来获取迭代状态，可以使用该属性来获取当前迭代是否是第一个迭代、是否是最后一个迭代等信息。

在电影信息的最后一列，代码使用了两个按钮：评分预测按钮和加入购物车按钮。当用户点击加入购物车按钮时，代码使用了 jQuery 库中的 click 函数来监听按钮的点击事件，并在点击时显示一个对话框提示用户添加成功。需要注意的是，为了避免重复使用 ID，应该将各个按钮的 ID 设置成不同的值，例如可以在 ID 后面加上循环变量的值，如 buyCar${status.index}。这样，在页面渲染时，每个按钮的 ID 值都是唯一的，就可以在 jQuery 中正确地选择它们了。