Question

我用插画家创建了一个SVG。元素在路径上有填充。我正在尝试根据路径所在的组ID更改颜色。

我想在事件发生时将同一组中的所有子元素填充为相同的颜色。

function ChangeColor(zone,color,colorCode) {
document.getElementById(zone).children().css( "fill", colorCode );
};

javascript将位于外部.js文件中。

单击颜色方块时，两个对象上的填充值应更改为组ID为＆＃34; Color_1＆＃34;。

我读到的一切都说这应该有用。

Answer 1

如@Paul LeBeau所述，您的第一个代码段确实运行良好，只是一个jsFiddle配置问题。

但是，在修改帖子时，您带来了一个新错误：

function ChangeColor(zone,color,colorCode) {
   document.getElementById(zone).children().css( "fill", colorCode );
};

此代码无法运行，因为您尝试在非jQuery对象（.children()上调用jQuery方法（.css()和document.getElementById()）确实返回一个DOM对象）。

您可以将此功能重写为：

function ChangeColor(zone,color,colorCode) {
  $('#'+zone).children().css( "fill", colorCode );
};

现在我们正在调用一个jQuery对象，一切运行良好，就像在你没有使用jQuery的第一个片段中一样。

Answer 2

如果你在Javascript运行时改变你的小提琴工作正常。如果您将其更改为No wrap选项之一，则表示一切正常。

更新：为什么会这样？

我没有看过jsfiddle究竟在做什么，但我想它的工作原理如下：

当您使用“onLoad”选项时，它会执行与以下内容等效的操作：

window.onload = function() {
   // users fiddle JS here
};

这意味着您定义的任何函数（即。ChangeColor()）都将在ready函数的命名空间内定义，并且对HTML事件处理程序不可见。

有两种替代解决方案。如上所述，将运行模式更改为两个“无包装”选项之一。

或者你可以继续使用“onLoad”模式并将函数强制进入全局命名空间（窗口）或其下的另一个namespce。

window.ChangeColor = function(zone,color,colorCode) {
    document.getElementById(zone).style.fill = colorCode;
};