使用jQuery切换SVG图片功能正常但控制台报错，如何解决？

Hey there, let's fix that annoying console error while keeping your SVG toggle working!

你提到页面上的SVG切换效果能正常运行，但控制台一直抛出 Uncaught TypeError: a[b].target.className.indexOf is not a function 错误。我仔细看了你的代码，问题出在else分支的选择器错误上。

错误原因分析 #

在if分支里，你正确地定位到.svg--logo下的<use>标签来修改xlink:href属性，但在else分支中，你错误地把attr("xlink:href", "#billie-logo")链式调用在了.outer-wrapper元素上：

// 错误的else分支代码
$(".outer-wrapper").css("border-bottom","").attr("xlink:href", "#billie-logo");

.outer-wrapper是普通的div容器，它既不需要也不支持xlink:href属性，这个错误的操作会干扰后续的事件处理逻辑，最终导致了那个和className.indexOf相关的报错。

修正后的代码 #

把jQuery代码改成下面这样，确保修改SVG属性的目标始终正确：

$(document).ready(function() {
  $(window).scroll(function(){
    var ScrollTop = parseInt($(window).scrollTop());
    if(ScrollTop > 150) {
      $(".outer-wrapper").css("border-bottom","1px solid #cdc8c7");
      $(".svg--logo").find("use").attr("xlink:href", "#billie-logo-sml");
    } else {
      $(".outer-wrapper").css("border-bottom","");
      $(".svg--logo").find("use").attr("xlink:href", "#billie-logo");
    }
  })
})

关键修正点 #

• 拆分了else分支的操作，分别处理.outer-wrapper的边框样式和SVG的<use>标签属性，避免链式调用错误
• 确保修改xlink:href的目标始终是.svg--logo下的<use>元素，和if分支的操作逻辑保持一致

这样修改后，控制台的错误会消失，同时滚动切换SVG图标的效果依然能正常工作。

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