基于变量用jQuery定位特定DOM元素及样式重置问题求助

编辑说明：重置操作需隐藏div并移除边框！

我正尝试通过一个可增减的变量来为元素添加边框并显示对应内容，本以为使用.eq(variable)可以实现，但遇到了问题，希望能得到帮助。

（请查看代码中//change specific dom item based in pos variable number注释部分）

var items = $(".owl-item").length
console.log("consultant images: " + items)

var pos = 1;
console.log("pos: " + pos)

function activateBio() {
  //reset
  $(".owl-item").css("border-bottom", "none")
  $(".consultants_bio").css("display", "none")

  //change specific dom item based in pos variable number
  $(".owl-item").eq(pos).css("border-bottom", "4px solid #e28b3a")
  $(".consultants_bio").eq(pos).css("display", "block")
}

// Go to the previous item
$('.owl-prev').click(function() {
  if (pos >= 1 && pos <= items) {
    pos -= 1;
    console.log("pos: " + pos)
    activateBio()
  }
})
// Go to the next item
$('.owl-next').click(function() {
  if (pos >= 0 && pos < items) {
    pos += 1;
    console.log("pos: " + pos)
    activateBio()
  }
})

问题原因 #

1. 索引不匹配：jQuery的.eq()方法从0开始索引，但初始pos设为1，第一次执行activateBio会直接选中第二个元素，不符合默认选中第一个的预期。
2. 边界判断错误：
   • 点击prev按钮时，条件允许pos减到0后继续变为-1，而.eq(-1)会选中最后一个元素，出现逻辑错误。
   • 点击next按钮时，条件允许pos增加到items，但最大有效索引是items-1，.eq(items)找不到对应元素，导致边框和内容无法显示。

修复后的代码 #

var items = $(".owl-item").length
console.log("consultant images: " + items)

// 初始索引设为0，对应第一个元素
var pos = 0;
console.log("pos: " + pos)

function activateBio() {
  // 重置所有元素状态
  $(".owl-item").css("border-bottom", "none")
  $(".consultants_bio").css("display", "none")

  // 给当前索引对应的元素设置样式
  $(".owl-item").eq(pos).css("border-bottom", "4px solid #e28b3a")
  $(".consultants_bio").eq(pos).css("display", "block")
}

// 初始化激活第一个元素
activateBio()

// 上一项按钮逻辑
$('.owl-prev').click(function() {
  // 只有当索引大于0时才能切换上一项
  if (pos > 0) {
    pos -= 1;
    console.log("pos: " + pos)
    activateBio()
  }
})

// 下一项按钮逻辑
$('.owl-next').click(function() {
  // 只有当索引小于最大有效索引时才能切换下一项
  if (pos < items - 1) {
    pos += 1;
    console.log("pos: " + pos)
    activateBio()
  }
})

额外优化建议 #

用CSS类代替直接操作行内样式，代码更易维护：

.owl-item.active {
  border-bottom: 4px solid #e28b3a;
}
.consultants_bio.active {
  display: block;
}

修改后的JS代码：

var items = $(".owl-item").length
var pos = 0;

function activateBio() {
  $(".owl-item, .consultants_bio").removeClass("active")
  $(".owl-item").eq(pos).addClass("active")
  $(".consultants_bio").eq(pos).addClass("active")
}

activateBio()

$('.owl-prev').click(function() {
  if (pos > 0) {
    pos -= 1;
    activateBio()
  }
})

$('.owl-next').click(function() {
  if (pos < items - 1) {
    pos += 1;
    activateBio()
  }
})

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