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

Posted 2023-03-06

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

【英文标题】：Issues with .addClass() method in project [duplicate]

【发布时间】：2016-04-25 08:17:27

【问题描述】：

在 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”，但未添加类。

【问题讨论】：

***.com/questions/8638621/…

非常感谢！！！这工作得很好......我想知道为什么它在 JS Fiddle 上工作呢？那好吧。无论如何感谢您的快速回复！！！

它可能在 JS Fiddle 上工作，因为它使用的是 jQuery 1.12 - 它增加了对使用 svgs 进行类操作的支持 - 如果您使用的版本低于 1.12 或 2.2，则它不起作用。你可以阅读更多 - blog.jquery.com/2016/01/08/jquery-2-2-and-1-12-released

【参考方案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 的帮助。

【讨论】：

注意：jQuery 1.12 和 2.2 添加了对使用 svgs 进行类操作的支持，因此不再需要使用 .attr