Question

我有一些HTML页面，其中包含不同数量的缩略图列表（在一页38处达到峰值），并且我使用以下jQuery在单击时存储每个缩略图的ID属性， currPhoto变量：

$('#thumbnav a:nth-child(1)').click(function() {
currPhoto = $('#0').attr('id');
});

$('#thumbnav a:nth-child(2)').click(function() {
currPhoto = $('#1').attr('id');
});

$('#thumbnav a:nth-child(3)').click(function() {
currPhoto = $('#2').attr('id');
});

$('#thumbnav a:nth-child(4)').click(function() {
currPhoto = $('#3').attr('id');
});

$('#thumbnav a:nth-child(5)').click(function() {
currPhoto = $('#4').attr('id');
});

...等等，继续增加33个。

我确定必须有一种方法可以将其简化为一个代码块，但我没有使用jQuery的经验，所以我不能为我的生活找出那个可能是。

Answer 1

一个简单的方法是使用for循环：

   for(var i = 0 ; i < 33 ;i++)
    {
       $('#thumbnav a:nth-child(' + i + ')').click(function() {
              currPhoto = $('#' + (i-1)).attr('id');
        });
    }

更好的方法是使用a标记class并将其用作选择器：

   <a class="cls">Content</a>
   $('.cls').click(function() {
          currPhoto = $(this).closest('.cls').attr('id');
    });

closest通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。

Answer 2

由于您正在a下查看所有 #thumbnav元素，因此您不需要单独的选择器：

$('#thumbnav a').click(function() {
  currPhoto = this.id;  // `this` will be the clicked `a` element
});

Answer 3

您应该只为父节点绑定一个事件，而不是每个链接绑定一个事件，特别是因为您在一个页面上有这么多：

$('#thumbnav').on('click', 'a', function() {
    currPhoto = $(this).attr('id');
});

此方法还允许您动态添加/删除链接，而无需绑定新事件。

如何简化这个jQuery？

3 个答案: