项目中 .addClass() 方法的问题[重复]

Question

在 Rails 中使用 Jquery，但 addClass 方法有问题。

不知道为什么我的添加类不起作用。 “on”和“hover off”在控制台中运行良好。

我试图让动画在 JSfiddle 上运行并且能够运行，但是即使我复制并粘贴代码，动画仍然无法在我的本地运行。如果您有任何建议，请告诉我...谢谢。

Working JS Fiddle of what I want

即使它在 JS fiddle 中工作，相同的代码在本地也不能工作。

我的代码：

HTML

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="fb-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 300 298.6" style="enable-background:new 0 0 300 298.6;" xml:space="preserve">
<circle class="social-circle" cx="150" cy="153.2" r="141.4"/>
<path class="social-path" d="M123.9,203c0-15.7,0-31.3,0-47c0-2.5-0.5-3.6-3.3-3.4c-4.9,0.2-9.8,0-14.7,0.1c-1.9,0-2.8-0.3-2.8-2.5
    c0.1-9.8,0.1-19.5,0-29.3c0-2.2,0.8-2.6,2.7-2.5c5.1,0.1,10.2-0.1,15.3,0.1c2.2,0.1,2.8-0.6,2.8-2.8c-0.1-7.5-0.1-15.1,0-22.6
    c0.1-8.4,2.2-16.3,6.7-23.4c6.8-10.7,17.2-15.6,29.4-16.1c11.4-0.5,22.9-0.2,34.3-0.3c1.9,0,2.2,0.8,2.2,2.4c0,9.8-0.1,19.5,0,29.3
    c0,2-0.8,2.4-2.6,2.3c-5.5-0.1-11.1-0.1-16.7,0c-6.9,0-11.4,3.6-11.9,10.4c-0.5,6.2-0.2,12.4-0.3,18.6c0,2,1.3,1.7,2.5,1.7
    c8.3,0,16.7,0.2,25-0.1c3.1-0.1,3.7,0.9,3.4,3.8c-1.1,9.6-1.9,19.2-2.8,28.8c-0.2,2.1-1,2.7-3.1,2.7c-7-0.1-14,0.1-21-0.1
    c-2.8-0.1-3.5,0.8-3.5,3.5c0.1,30.9,0,61.7,0.1,92.6c0,3.1-0.6,4.1-3.9,4.1c-11.7-0.2-23.3-0.2-35,0c-2.5,0-3.1-0.7-3.1-3.1
    C124,234.4,123.9,218.7,123.9,203z"/>
</svg>

SCSS

svg{
  height: 60px;
  width: 60px;


  .social-circle {
    fill: none;

  }

  .movingCirc {
        stroke-width: 10;
        stroke: blue;
        stroke-dasharray: 900;
        -webkit-animation: dash-circ 2s ease-in-out ;
         animation: dash-circ 2s ease-in-out;
  }

  .social-path {
    fill: none;
    stroke-width: 10;
    stroke: blue;
    stroke-dasharray: 615;
    -webkit-animation: dash 4s linear infinite;             animation: dash 4s linear infinite;

  }
}
  @keyframes dash {
   from{
     stroke-dashoffset:615;
   }
   to{
      stroke-dashoffset: 0;
    }
  }
  @keyframes dash-circ {
   from{
     stroke-dashoffset:900;
   }
   to{
      stroke-dashoffset: 0;
    }
  }

jquery

$(document).ready(function() {
  $('svg').hover(function() {
    /* Stuff to do when the mouse enters the element */
      $(this).find('circle').addClass('movingCirc');
      console.log('on');
  }, function() {
    /* Stuff to do when the mouse leaves the element */
    $(this).find('circle').removeClass('movingCirc');
    console.log("hover off");
  });
});

我在树中导入了 Jquery 文件和 SCSS 文件。

就像我说的，在控制台中，当我悬停 SVG 时，我可以看到 “on” 和 “hover off”，但未添加类。

Answer 1

jQuery 不会向 SVG 添加类，所以我不得不像这样更改属性：

$(document).ready(function() {
  $('svg').hover(function() {
    /* Stuff to do when the mouse enters the element */
      $(this).find('circle').attr("class", "social-circle movingCirc");
      console.log('on');
  }, function() {
    /* Stuff to do when the mouse leaves the element */
    $(this).find('circle').attr("class", "social-circle");
    console.log("hover off");
  });
});

感谢Lalji Tadhani 的帮助。