使用ajax <c:forEach>循环数据，只是第一条有效果

Question

遍历图片集合，当鼠标悬停在图片上弹出文字，但只是第一条有用，其他没有效果，这是怎么回事
代码：

 <script type="text/javascript">
$(function(){   
        $("#img_1").hover(function(){
                        $("#span").html("删     除");

    },function(){
                $("#span").html("");
    });
    )}；
    <c:forEach items="${listProduct}" var="lp">
    <td id="img_1" >
    <span id="span"></span>
    <a href="">
    <img src="${pageContext.request.contextPath}/${lp.image}" style="width: 50px;height: 40px"/>
    </a>
    </td>
<c:forEach>

Answer 1

id一样了。。$("#img_1")只能获取到第一个出现的dom， $("#span")同理

改为属性选择器，而不是id选择器

 $(function(){   
        $("td[id='img_1']").hover(function(){
                $('span',this).html("删     除");//通过dom关系来获取
                       // $("#span").html("删     除");

    },function(){
                $('span',this).html("");
               // $("#span").html("");
    });
    )}