无法在Wordpress中使用jQuery

Question

[我在学习wordpress方面还很陌生，所以我仍在设法掌握其意大利面条代码和数百万个包含等。

但是我最终想要做的是为SVG设置动画。它在CodePen中工作正常，我包含以下两个文件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TimelineMax.min.js"></script>

SVG文件如下所示：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="gf" x="0px" y="0px" viewBox="0 0 595.28 159" style="enable-background:new 0 0 595.28 159;" xml:space="preserve" class="alignnone size-full wp-image-1791 style-svg replaced-svg svg-replaced-0">
<g>
// Paths removed for convenience
</g>
</svg>

和jQuery，我可以运行以下命令：（＃gf是我要设置动画的嵌入式SVG元素）

jQuery(document).ready(function () {

  console.log("Playing")

  var t1 = new TimelineMax();


  t1.from('#gf #border_top',0.5, {scaleX: 0, transformOrigin: "center", ease: Power0.easeOut})
  t1.from('#gf #border_top_left, #border_top_right', 0.05, {scaleX: 0, transformOrigin: "top", ease: Power0.easeOut})
  t1.from('#gf #border_left, #border_right', 0.2, {scaleY: 0, transformOrigin: "top", ease: Power0.easeOut})
  t1.from('#gf #border_bottom_left, #border_bottom_right', 0.05, {scaleX: 0, transformOrigin: "top", ease: Power0.easeOut})
  t1.from('#gf #border_left_bottom', 0.5, {scaleX: 0, transformOrigin: "left", ease: Power2.easeOut})
  t1.from('#gf #border_right_bottom', 0.5, {scaleX: 0, transformOrigin: "right", ease: Power2.easeOut},'-=0.5')

  t1.from('#gf #letter_two', 0.1,         {opacity: 0, transformOrigin: "right", ease: Circ.easeOut})
  t1.from('#gf #letter_zero', 0.1,        {opacity: 0, transformOrigin: "right", ease: Circ.easeOut})
  t1.from('#gf #letter_second_two', 0.1,  {opacity: 0, transformOrigin: "right", ease: Circ.easeOut})
  t1.from('#gf #letter_second_zero', 0.1, {opacity: 0, transformOrigin: "right", ease: Circ.easeOut})

});

在Codepen中工作正常。但是，当我将其移植到Wordpress时，终于可以识别时间轴对象，但是动画still不会触发。

出于某些奇怪的原因，Wordpress仍在v1.12.4上运行，因此我只能使用它。但是，即使我添加：

jQuery("#gf").css("fill","#f00")

上述功能行，它不会改变颜色。我在控制台中获得“播放”输出，但是颜色没有改变。我尝试运行.addClass，但没有结果。我似乎无法在此功能中操作DOM。我似乎只能将其输出到控制台。

任何想法如何诊断此问题？我真的很茫然。

Edit：似乎jQuery('body').css('background','#f00')起作用，因此由于某种原因，它的jQUery找不到#gf id时遇到问题。

另一个编辑：SVG位于<p>标记内，因此我尝试添加：

jQuery("p").click(function () {
alert("bingo")
})

并且它起作用了，但是当我尝试在上述示例中将p更改为p svg时，它失败了。这到底是怎么回事？为什么JQuery不能使用此SVG元素执行任何操作，为什么不触发动画？

Yet Another Edit：我将第一个动画更改为body而不是#gf border_top并进行了动画处理。因此，动画被加载并触发，只是不在SVG元素上。

Answer 1

我输入了这段代码，对我来说很好用。您正在使用SVG的fill属性，这就是它不起作用的原因。填充属性用于路径。另外，请检查SVG中是否包含#border_top元素。并首先检查控制台是否有任何错误。

jQuery(document).ready(function () {

  console.log("Playing")


$('#gf').css('background', "red");

 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="gf" x="0px" y="0px" viewBox="0 0 595.28 159" style="enable-background:new 0 0 595.28 159;" xml:space="preserve" class="alignnone size-full wp-image-1791 style-svg replaced-svg svg-replaced-0">
<g>
// Paths removed for convenience
</g>
</svg>