ajax无法获取前端forEach中的数据，只能获取第一个的解决方法

问题

在项目中要使用ajax异步无刷新的删除指定数据，可是在点击删除按钮后每次只能获取到id为1的数据。

源代码：

<div class="row">
    <c:forEach items="${userList}" var="u">
<div class="col-lg-3">
    <div class="card">
        <div class="card-body text-center">
            <img src="/resource/${u.userAvatar}" alt="user" class="rounded-circle thumb-xl">
            <h5 class="font-16 fw-bold">${u.userName}</h5>
            <h6 class="text-muted me-3 fw-semibold"> <fmt:formatDate value="${u.userRegisterTime}" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate> </h6>
            <h6 class="text-muted me-3 fw-semibold"><fmt:formatDate value="${u.userLastLoginTime}" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate></h6>
            <p class="text-muted mt-1">${u.userRole}</p>
            <c:choose>
            <c:when test="${u.userStatus==1}">
                <h6 class="text-muted me-3 fw-semibold">状态：<button type="button" class="btn-success">正常</button> </h6>
            </c:when>
            <c:otherwise >
                <h6 class="text-muted me-3 fw-semibold">状态：<button type="button" class="btn-danger">禁用</button> </h6>
            </c:otherwise>
            </c:choose>

            <a href="/admin/user/toUpdate/${u.userId}"><button type="button" class="btn btn-sm btn-primary">编辑</button></a>
            <button id="userId" type="button" class="btn btn-sm btn-de-primary" title="${u.userId}" value="${u.userId}" onclick="dele()" >删除</button>
        

        </div><!--end card-body-->
    </div><!--end card-->
   </div>
    </c:forEach>
  <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

原ajax：

<script>

    function dele(data) {
      //  var id=$(".Id").attr("userid");
      //  var data = document.getElementById('Id').value;
       // layer.alert("确定删除吗，会同时删除该用户所有的文章！");
        alert(data);
        layer.confirm('确定删除吗，会同时删除该用户所有的文章！', {
            icon: 2,        //会出现正确的图片
            btn: ['确定','取消'] ,    //按钮
            btn1:function (){
            $.ajax({
                async:false,
                url:"${pageContext.request.contextPath}/admin/user/delete",
                data:{
                    "userId":$("#userId").val()
                },
                success:function () {
                    layer.msg("删除成功");
                }
            })

        },
        btn2:function () {
            layer.close()
        }
    })}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

这样在前端点击删除的时候所有数据后面都为id1 ，查找资料发现两个解决的方法。

解决

1.网友建议说将id选择器换成属性选择器，因为id在forEach循环中只有第一条有效，但是此方法对我无效。大家也可以试一下。这里直接放第二个方法。

2.点击的事件加上参数传递

  <button id="userId" type="button" class="btn btn-sm btn-de-primary" title="${u.userId}" value="${u.userId}" onclick="dele(${u.userId})" >删除button>

1
2

在删除按钮上直接传参

<script>

    function dele(data) {
     
        alert(data);
        layer.confirm('确定删除吗，会同时删除该用户所有的文章！', {
            icon: 2,        //会出现正确的图片
            btn: ['确定','取消'] ,    //按钮
            btn1:function (){
            $.ajax({
                async:false,
                url:"${pageContext.request.contextPath}/admin/user/delete",
                data:{
                    "userId":data
                },
                success:function () {
                    layer.msg("删除成功");
                }
            })

        },
        btn2:function () {
            layer.close()
        }
    })}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

解决撒花！