Question

我尝试使用jQuery实现更改svg图像的效果。我的代码在浏览器中工作，但它在控制台中返回错误。我想删除错误。我该怎么办？

错误

(unknown) Uncaught TypeError: a[b].target.className.indexOf is not a function

的jQuery

    $(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");
        }
    })
})

HTML

<div class="header-item">
<a class="logo" href="{{ site.baseurl }}/">
  <svg class="svg--logo">
    <title>Billie Logo</title>
    <use xlink:href="#billie-logo"/>
  </svg>
</a>

Answer 1

您将无法在此处使用jQuery。 jQuery假定所有元素都是HTML并且相应地具有接口。但是在HTML中，Element.className接口是一个字符串，在SVG中，接口SVGElement.className是一个SVGAnimatedString（它是一个具有baseVal和animVal属性的Object）。

错误不在你的代码中，而是在jQuery的内部工作中。我甚至无法确切地告诉你它在哪里，因为没有明显的理由说明为什么jQuery需要在class属性中找出一个字符的位置 - 这就是错误信息似乎的内容。

我看不出你为什么需要使用jQuery的充分理由。使用SVG意味着无论如何都不支持Internet Explorer 8，这意味着您可以使用普通的Javascript而不会破坏任何内容：

document.addEventListener("load", function() {
    window.addEventListener("scroll", function() {
        var ScrollTop = Math.round(window.pageYOffset); // window.scrollY won't work in IE9+
        if(ScrollTop > 150) {
            document.querySelector(".outer-wrapper").style["border-bottom"] = "1px solid #cdc8c7";
            document.querySelector(".svg--logo use").setAttribute("xlink:href", "#billie-logo-sml");
        } else {
            document.querySelector(".outer-wrapper").style["border-bottom"] = "";
            document.querySelector(".svg--logo use").setAttribute("xlink:href", "#billie-logo");
        }
    });
});

请注意，Element.querySelector只能找到第一个匹配的元素。如果有多个元素，则需要使用Element.querySelectorAll并循环生成的Iterable。

Answer 2

最后，我决定使用CSS background-image，因为SVG和HTML / JavaScript之间存在一些问题。它工作正常。我将展示我的部分代码。

Javascript

  $(window).scroll(function() {
    var scrollTop = Math.round(window.pageYOffset); // window.scrollY won't work in IE9+
    var elm = document.getElementById("logo");
    if(scrollTop > 30) {
        $(".outer-wrapper").css("border-bottom","1px solid #cdc8c7");
        $(".svg--logo").addClass('small');
        $(".svg--logo").removeClass('large');
    } else {
        $(".outer-wrapper").css("border-bottom","");
        $(".svg--logo").removeClass('small');
        $(".svg--logo").addClass('large');
    }
});

CSS

.large {
  background-image: url(../../../assets/images/illus/billie_logo_large.svg);
  background-repeat: no-repeat;
  margin-top: -60px;
  margin-left: -90px;
  padding-bottom:30px;
}
.small {
  background-image: url(../../../assets/images/illus/billie_logo_small.svg);
  background-repeat: no-repeat;
}
}
}

使用setting属性更改svg会返回错误

2 个答案: