正在添加动态第二类Jquery

Adding dynamic second class Jquery

本文关键字：二类 Jquery 添加 动态      更新时间：2023-09-26

我试图在jQuery中使用for循环将第二个类添加到一组按钮中，第二个类别设置为当前迭代器（I）的编号。每个按钮的第一个类被分配给"用户"。我希望每个按钮都有一个动态的第二类，这样当单击时，我可以使用它的第二个类作为索引来访问对象中的特定键。

我遇到的问题是，每个按钮的第二个类都设置为0。"users"是一个长度为4的数组，因此按钮的第二类应该是0,1,2,3。

$(document).ready(function(){
    for(var i = 0; i < users.length; i++) {
    var $currentUser = $('<button class="users '+ i +'"></button>');
        $currentUser.text(users[i]);
        $currentUser.appendTo('.userList');
      }
    $(".users").click(function() {
      alert($(".users").attr('class').split());
    // Alert returns "users 0" for each button.
    });
});

底部的警报现在只是一个占位符，用于检查类是否设置正确。谢谢

将代码更改为以下内容。单击元素时，将$(".users")更改为$(this)。

$(".users").attr('class')总是返回所有按钮元素。

$(".users").click(function() {
  alert($(this).attr('class').split());
});

当在一组元素上使用.attr（'class'）这样的getter方法时，它将返回该集中第一个元素的值。当您说$('.users')时，它将返回类用户的所有元素。

在您的情况下，您希望引用单击的按钮，该按钮在单击处理程序中以this的形式提供，因此您可以

$(document).ready(function() {
  var users = ['u1', 'u2', 'u3']
  for (var i = 0; i < users.length; i++) {
    var $currentUser = $('<button class="users ' + i + '"></button>');
    $currentUser.text(users[i]);
    $currentUser.appendTo('.userList');
  }
  $(".users").click(function() {
    alert(this.className.split(/'s+/));
    alert(this.classList); //for ie 10+
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="userList"></div>

相关文章：