如何根据列表项内锚点的active状态为指定按钮动态添加/移除类？

首先，咱们先解决你之前尝试的代码问题，再一步步实现你需要的按钮状态控制功能。

为什么你之前的代码不生效？ #

你写的这段代码：

if ($('.thumbnail').is(".active")) { $(this).parent().addClass("active"); }

核心问题是$(this)在这里没有正确指向带有active类的.thumbnail元素。$('.thumbnail').is(".active")只是判断是否存在符合条件的元素，但this的上下文并没有绑定到该元素上，所以无法给父<li>添加类。

完整实现方案 #

我们可以把所有逻辑封装成一个可复用的函数，不管是页面初始化、点击缩略图还是点击前后按钮，都能统一更新状态：

// 定义统一的状态更新函数
function updateNavStates() {
  // 1. 给当前激活的a标签的父li添加active类
  // 先移除所有li的active类，避免残留
  $('.thumbnails li').removeClass('active');
  // 找到带active类的a，给它的父li加上active
  $('.thumbnail.active').closest('li').addClass('active');

  // 2. 处理prev-button的状态
  const isFirstThumbnailActive = $('.thumbnails li:first-child .thumbnail').hasClass('active');
  $('#prev-button').toggleClass('new-class', isFirstThumbnailActive);

  // 3. 处理next-button的状态
  const isLastThumbnailActive = $('.thumbnails li:last-child .thumbnail').hasClass('active');
  $('#next-button').toggleClass('new-class', isLastThumbnailActive);
}

// 页面加载时初始化状态
$(document).ready(function() {
  // 初始化状态
  updateNavStates();

  // 点击缩略图切换active类
  $('.thumbnail').on('click', function() {
    // 移除所有a的active类
    $('.thumbnail').removeClass('active');
    // 给当前点击的a添加active
    $(this).addClass('active');
    // 更新导航状态
    updateNavStates();
  });

  // 点击prev按钮切换到上一个缩略图
  $('#prev-button').on('click', function() {
    const currentActive = $('.thumbnail.active');
    const prevThumbnail = currentActive.closest('li').prev().find('.thumbnail');
    
    if (prevThumbnail.length) {
      currentActive.removeClass('active');
      prevThumbnail.addClass('active');
      updateNavStates();
    }
  });

  // 点击next按钮切换到下一个缩略图
  $('#next-button').on('click', function() {
    const currentActive = $('.thumbnail.active');
    const nextThumbnail = currentActive.closest('li').next().find('.thumbnail');
    
    if (nextThumbnail.length) {
      currentActive.removeClass('active');
      nextThumbnail.addClass('active');
      updateNavStates();
    }
  });
});

代码说明 #

• 统一状态函数：updateNavStates集中处理所有状态更新逻辑，避免重复代码，后续维护更方便。
• 父li的active类：先清空所有<li>的active类，再给当前激活的<a>的父元素添加类，确保不会出现多个<li>同时带active的情况。
• 按钮状态控制：使用toggleClass的第二个布尔参数，能简洁地根据条件添加/移除new-class，比传统if-else写法更紧凑。
• 前后按钮逻辑：点击按钮时先确认目标缩略图存在，再执行切换操作，避免出现无意义的错误。

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