Question

我正在尝试使用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.
    });
});

底部的警告只是一个占位符，现在可以检查是否正确设置了类。谢谢！

Answer 1

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

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

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

Answer 2

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

在您的情况下，您希望引用点击的按钮，该按钮在点击处理程序中显示为this，因此您可以

＆＃13;

$(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+
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="userList"></div>

＆＃13;

添加动态第二类Jquery

2 个答案: