你现在遇到的问题很明确：代码只在页面第一次加载时执行了尺寸判断，窗口大小改变的时候没有重新触发切换逻辑。下面给你两种解决方案，优先推荐CSS方案，更简洁高效，也给你优化后的JS方案作为备选。

方案一：用CSS媒体查询实现（推荐） #

这种方式不需要JS，完全靠浏览器原生的媒体查询控制显示隐藏，性能更好，也更易维护。

首先修改你的HTML，把三个图片都放在navbar-brand里，给它们加不同的类名：

<a class="navbar-brand" href="index.html">
  <img class="desktop-logo" src="assets/images/logo.png" alt="Desktop Logo">
  <img class="mobile-logo1" src="assets/images/Llogo AIP.png" alt="Mobile Logo 1">
  <img class="mobile-logo2" src="assets/images/CoA RKS.png" alt="Mobile Logo 2">
</a>

然后添加CSS样式，通过媒体查询控制不同尺寸下的显示状态：

/* 默认显示桌面端的单张图，隐藏移动端的两张图 */
.desktop-logo {
  display: block;
}
.mobile-logo1, .mobile-logo2 {
  display: none;
}

/* 当窗口宽度小于575.98px时，切换显示状态 */
@media (max-width: 575.98px) {
  .desktop-logo {
    display: none;
  }
  .mobile-logo1, .mobile-logo2 {
    display: inline-block; /* 可以根据你的布局需求改成block或者其他值 */
    /* 这里还可以加一些间距、尺寸样式，让两张图排版更合理 */
    margin-right: 8px;
  }
}

这种方式的好处是完全不需要JS，浏览器会自动响应窗口尺寸变化，实时切换显示，而且代码更简洁，后期维护也方便。

方案二：优化后的jQuery方案 #

如果你必须用JS实现（比如需要动态加载图片路径等场景），那我们需要把切换逻辑封装成函数，然后监听窗口的resize事件，同时加上防抖处理避免频繁触发。

修改后的JS代码如下：

// 封装切换图片的逻辑成函数
function toggleNavbarBrandImages() {
  const $navbarBrand = $('.navbar-brand');
  const windowWidth = $(window).width();

  // 判断当前窗口尺寸，切换对应的图片
  if (windowWidth < 575.98) {
    // 检查当前是否已经是移动端的两张图，避免重复操作DOM
    if ($navbarBrand.children('img').length !== 2) {
      $navbarBrand.empty().append(`
        <img src="assets/images/Llogo AIP.png" alt="Mobile Logo 1">
        <img src="assets/images/CoA RKS.png" alt="Mobile Logo 2">
      `);
    }
  } else {
    // 检查当前是否是桌面端的单张图，避免重复操作DOM
    const currentImg = $navbarBrand.find('img');
    if (currentImg.length !== 1 || currentImg.attr('src') !== 'assets/images/logo.png') {
      $navbarBrand.empty().append('<img src="assets/images/logo.png" alt="Desktop Logo">');
    }
  }
}

// 页面加载时执行一次初始化
$(document).ready(function() {
  toggleNavbarBrandImages();

  // 监听窗口resize事件，加上防抖处理（避免频繁触发）
  let resizeTimer;
  $(window).on('resize', function() {
    // 每次resize时先清除之前的定时器，确保只在停止调整后执行一次
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(toggleNavbarBrandImages, 250); // 250ms的延迟可以根据需求调整
  });
});

代码说明： #

1. 封装函数：把切换逻辑抽成函数，这样页面加载和窗口resize时都能调用
2. 防抖处理：窗口resize会频繁触发事件，防抖可以让函数在用户停止调整窗口250ms后才执行，减少不必要的DOM操作，提升性能
3. 状态判断：每次切换前先检查当前的图片状态，避免重复清空和添加元素，进一步优化性能

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