如何用jQuery按连续顺序获取类元素属性？图片切换功能遇阻

核心问题拆解 #

你遇到的问题主要出在两个地方：

1. jQuery的attr()方法特性：当你用attr()获取一组元素的属性时，它只会返回第一个元素的属性值，这就是你第一段代码只能拿到第一张小图rel的原因。
2. 选择器使用错误：
   • 第二段代码里的nextAll('.small_image')是找#small_images的同级后续元素，但你的小图是#small_images的子元素，根本不是同级，所以返回undefined。
   • 第三段代码的选择器过于复杂且逻辑混乱：children().nextAll()只会取第一个子元素之后的同级元素，再用find()去搜子元素，完全不符合你的DOM结构。

正确实现思路 #

要实现依次切换，你需要跟踪当前显示的小图索引，然后基于索引去获取对应小图的rel属性。步骤如下：

1. 获取所有小图的集合：先把所有小图元素存起来，方便后续索引定位
2. 维护当前索引变量：记录当前显示的是哪一张小图
3. 切换逻辑：点击切换按钮时更新索引，超出范围时循环回到开头/结尾，再根据索引获取对应小图的rel，更新大图显示

修正后的代码示例 #

假设你的DOM结构是：

<div id="main_image">
  <img src="" alt="大图">
</div>
<div id="small_images">
  <a href="#" class="small_image" rel="图1地址"></a>
  <a href="#" class="small_image" rel="图2地址"></a>
  <a href="#" class="small_image" rel="图3地址"></a>
</div>
<button id="prev_btn">上一张</button>
<button id="next_btn">下一张</button>

对应的jQuery代码：

// 初始化变量
var $smallImages = $('#small_images a.small_image');
var totalImages = $smallImages.length;
var currentIndex = 0;

// 初始化显示第一张图
$('#main_image img').attr('src', $smallImages.eq(currentIndex).attr('rel'));

// 下一张按钮逻辑
$('#next_btn').click(function() {
  currentIndex = (currentIndex + 1) % totalImages; // 超出总数时回到0
  var currentRel = $smallImages.eq(currentIndex).attr('rel');
  $('#main_image img').attr('src', currentRel);
});

// 上一张按钮逻辑
$('#prev_btn').click(function() {
  currentIndex = (currentIndex - 1 + totalImages) % totalImages; // 小于0时回到最后一张
  var currentRel = $smallImages.eq(currentIndex).attr('rel');
  $('#main_image img').attr('src', currentRel);
});

关键说明 #

• $smallImages.eq(currentIndex)：通过索引精准定位到某一张小图，再用attr('rel')就能拿到对应的值
• 索引更新时用取模运算%，可以实现循环切换（最后一张点下一张回到第一张，第一张点上一张回到最后一张）
• 不要用复杂的链式选择器，直接用find()或children()获取子元素集合更清晰，比如$('#small_images').find('a.small_image')和$smallImages效果一致

内容的提问来源于stack exchange，提问作者lawprac