Question

我正在尝试遍历12个类，名为.video-link0到video-link11，其中每个类都得到了处理：

$('.video-link[n]').click(function() {
    $('.video-link[n]').addClass('show');
});

基本上，我想要以下行为：

点击.video-link1后，addClass('show')到video-link1

点击.video-link2后，addClass('show')到video-link2

依此类推，好像我有12个看起来像这样的函数：

$('.video-link1').click(function() {
    $('.video-link1').addClass('show');
});

$('.video-link2').click(function() {
    $('.video-link2').addClass('show');
});

... and so on

我想编写一个循环，取代了将其写成12个独立案例的需要。

以下不会产生我正在寻找的结果：

var elems = 12;

for(var i = 0; i < elems; i++){
    $('.video-link' + i).click(function() {
        $('.video-link' + i).addClass('show');
    });
};

** 更新 **

这不是一个重复的问题，否则引用的上述问题不符合我的要求。我不是试图用next向上和向下移动DOM。相反，我想编写一个循环，使用i迭代编号为0-11的12个类来枚举这些情况。

** 更新 **

这对我有用，并且正在使用Lloyd Banks的建议（我需要i枚举器加this关键字）：

for (var i = 0; i < 12; i++) {
    $('.video-link'+i).click(function() {
      $(this).addClass('show');
    });
  }

Answer 1

您可以使用^=选择器的开头，并使用$(this)

引用每个

$("[class^='video-link']").click(function() {
    $(this).addClass('show');
});

Answer 2

您可以使用$(this)来引用事件回调中的当前（目标）元素：

$('.video-link').click(function() {
    $(this).addClass('show');
});

Answer 3

您可以使用

function(numberOfElements){
    for(var i = 1; i <= numberOfElements; i++){
        $('.video-link' + i).on('click', function(){
            $(this).addClass('show');
        });
    }
}

您还应该使用.on绑定事件而不是.click。如果您在初始页面加载后使用.click生成元素，则事件处理程序将无法注册。

循环通过一组元素jQuery

3 个答案: