循环遍历一组元素 jQuery

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) 在事件回调中引用当前（目标）元素：

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

Answer 2

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

引用每个

$("[class^='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

Loop through a set of elements jQuery

javascript

jquery

jquery-events