尝试从数据属性中获取 ID 时未定义

Question

我无法弄清楚为什么我在尝试从下面的代码中尝试 console.outiUsedId 变量时得到未定义。

这里我将用户ID附加到data-iUserId。

var aUsers = [];            
            for( var i = 0; i < aUsers.length; i++ ){
                $("#lblUsers").append('<tr><th scope="row">'+aUsers[i].id+'</th><td>'+aUsers[i].username+'</td><td>'+aUsers[i].firstName+'</td><td>'+aUsers[i].lastName+'</td><td>'+aUsers[i].email+'</td><td>'+"<span data-iUserId='"+aUsers[i].id+"'</span><input type='checkbox' id='chk_"+i+"'"+'</td></tr>');
            }

在这里我尝试使用 data 属性中的数据，但在控制台中我得到的只是undefined。

$(document).ready(function() {
    $("#remove").on("click", function() {
        $('input:checked').each(function() {
            $(this).closest('tr').remove();
            var iUserId = $(this).attr('data-iUserId');
            console.log(iUserId);
            for (var i = 0; i < aUsers.length; i++) {
                if (iUserId == aUsers[i].iUsersId) {
                    aUsers.splice(i, 1);
                }
            }
        });
    });

});

有什么猜测吗？请帮忙！

Answer 1

您正在使用容器删除父级，然后尝试访问该元素。

删除父级应该在最后一步：

$(document).ready(function() {
    $("#remove").on("click", function() {
        $('input:checked').each(function() {
            var iUserId = $(this).closest('span').attr('data-iUserId');
            console.log(iUserId);
            for (var i = 0; i < aUsers.length; i++) {
                if (iUserId == aUsers[i].iUsersId) {
                    aUsers.splice(i, 1);
                }
            }
            $(this).closest('tr').remove();
        });
    });

});

另外，请考虑@pBuch 的评论

Answer 2

原因是您正在遍历复选框，而不是具有您尝试访问的属性的跨度。

$(this) 指的是复选框，而不是您使用的每个方法中的跨度：

 $('input:checked').each(function() { 
     // Inside this each statement $(this) refers 
     // to the the current 'input:checked' element being accessed
 });

您应该将 data-iUserId 属性放在复选框上，因为您正在访问该元素。

还有！您缺少开始跨度标记上的结束“>”：

<span data-iUserId='"+aUsers[i].id+"'</span>

Answer 3

var aUsers = [];
//...somehow populate array...
// We have to assume here that the array got populated 
for (var i = 0; i < aUsers.length; i++) {
  $("#lblUsers").append('<tr><th scope="row">' + aUsers[i].id + '</th><td>' + aUsers[i].username + '</td><td>' + aUsers[i].firstName + '</td><td>' + aUsers[i].lastName + '</td><td>' + aUsers[i].email + '</td><td>' + "<span data-iUserId='" + aUsers[i].id + "'></span><input type='checkbox' id='chk_" + i + "'" + '</td></tr>');
}

$(document).ready(function() {
  $("#remove").on("click", function() {
    $("#lblUsers").find('input[type="checkbox"]:checked').each(function() {
      // fixed to get the element with the data
      var iUserId = $(this).siblings('[data-iUserId]').data('iuserid');
      console.log(iUserId);
      for (var i = 0; i < aUsers.length; i++) {
        // bad practice to use a global aUsers
        if (iUserId == aUsers[i].iUsersId) {
          aUsers.splice(i, 1);
        }
      }
      $(this).closest('tr').remove();
    });
  });
});