jsp中使用foreach

Question

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

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

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

Answer 1

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

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