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/

JQuery .load函数仅适用于Chrome

1 个答案: