jQuery函数调用异常：指定.hero-slide元素无法正常显示

嘿，我一眼就瞅出你代码里的问题啦！你的showHeroSlide函数里用了$(this)来定位要显示的元素，但你调用函数时是直接传选择器字符串（比如showHeroSlide('#hero-slide-2')），这时候函数内部的this根本不是你想找的那个slide元素——它默认绑定的是全局的window对象，所以$(this)等价于$(window)，自然找不到#hero-slide-2或#hero-slide-3来显示啦！

修正方案（两种可选） #

方案一：让函数接收目标元素参数（最直观） #

直接修改函数，让它接收你要显示的元素选择器作为参数，然后用这个参数去选中元素：

function showHeroSlide(targetSlide) { 
  // 先隐藏所有.hero-slide元素
  $('.hero-slide').css({ 'display' : 'none' }); 
  // 再显示传入的目标元素
  $(targetSlide).css({ 'display' : 'block' }); 
}

调用方式和你原来的一样就行：

if (bgFilename === '02.jpg') { 
  showHeroSlide('#hero-slide-2'); 
} else if (bgFilename === '03.jpg') { 
  showHeroSlide('#hero-slide-3'); 
} else { 
  // 这里放其他情况的处理，比如显示默认slide
  showHeroSlide('#hero-slide-1'); 
}

方案二：调用时绑定this的指向 #

如果你不想修改函数，可以在调用时用call或apply把this绑定到目标元素上：

if (bgFilename === '02.jpg') { 
  // 把this绑定到#hero-slide-2元素上
  showHeroSlide.call($('#hero-slide-2')[0]); 
} else if (bgFilename === '03.jpg') { 
  showHeroSlide.call($('#hero-slide-3')[0]); 
}

这种方式下，函数里的$(this)就会正确指向你要显示的slide元素啦。

额外优化建议 #

你还可以用jQuery自带的hide()和show()方法替代直接设置css，代码会更简洁：

function showHeroSlide(targetSlide) { 
  $('.hero-slide').hide(); 
  $(targetSlide).show(); 
}

别忘了放在document ready里 #

一定要把所有代码包裹在$(document).ready()回调里，确保DOM加载完成后再执行操作：

$(document).ready(function() {
  // 这里放你的函数定义和判断逻辑
  function showHeroSlide(targetSlide) { 
    $('.hero-slide').hide(); 
    $(targetSlide).show(); 
  }

  if (bgFilename === '02.jpg') { 
    showHeroSlide('#hero-slide-2'); 
  } else if (bgFilename === '03.jpg') { 
    showHeroSlide('#hero-slide-3'); 
  } else { 
    showHeroSlide('#hero-slide-1'); 
  }
});

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