javascript - JQuery .load 函数仅适用于 Chrome

Question

页面加载后，我想使用 JQuery 从 div 元素中获取数据属性，其中包含颜色值。然后我想将颜色值应用到 SVG 图像s。这在 Chrome 中工作正常，但在 IE/Firefox 中不行:

$("div.socialmediaicons svg").load(function(event) { 

  var socialcoloractive = $(this).closest("div").data("socialcoloractive");
  var socialcolorinactive = $(this).closest("div").data("socialcolorinactive");

  TweenMax.to(".iconactive svg", 1.5, {
      fill: socialcoloractive,
  });
  TweenMax.to(".iconinactive svg", 1.5, {
      fill: socialcolorinactive,
  });

});

我找到的最接近解决方案的是这篇文章:Jquery applying css to load div但是我不知道如何使用回调修改我的代码。

感谢任何帮助，谢谢。

Answer 1

由于您有内联 SVG 元素，我认为您不必等待它们加载，但也许 Chrome 会在它们上触发 load 事件。无论如何，您只想迭代这些元素并更改颜色:

$("div.socialmediaicons svg").each(function() { 

  var socialcoloractive = $(this).closest("div").data("socialcoloractive");
  var socialcolorinactive = $(this).closest("div").data("socialcolorinactive");

  TweenMax.to(".iconactive svg", 1.5, {
      fill: socialcoloractive,
  });
  TweenMax.to(".iconinactive svg", 1.5, {
      fill: socialcolorinactive,
  });

});

简化演示:https://jsfiddle.net/zs0meqsh/