在不同页面上覆盖JavaScript函数

Question

在不同页面上覆盖JavaScript函数

3

这对我来说是新的，我不知道该怎么处理。

页面上有一个标志，使用过渡效果更改其大小和颜色，并由HTML底部的以下代码触发：

document.onload="initialize()"
setInterval(function(){
    setTimeout(function(){
        $('#path1').css('transform','scale(.95)');
        $('#path2').css('transform','scale(.95)');
        $('#path2').css('fill','#F7A700');
    }, 2000);
$('#path1').css('transform','scale(1.05)');
    $('#path2').css('transform','scale(1.00)');
    $('#path2').css('fill','#FFCF55');
}, 4000);

这将启动过渡并协调更改svg路径的颜色。在单独的脚本页面上，有一个确定当前页面滑块的函数，我需要为特定页面更改#path2的css填充。我尝试了if...else语句，将setInterval()函数移动到同一页，等等，但是没有任何东西可以让我在setInterval()函数中覆盖填充颜色。

修改：它包含在html中，并且有一个包含所有其他功能的单独js页面。因此，我认为这可能与此有关，但现在我明白它正在无限循环中运行，因此我尝试进行的任何更改都将被覆盖。这是一个具有多个路径的svg徽标，在主页幻灯片上，其中一个路径需要是白色，所有其他页面幻灯片都保持不变。只有一个html页面，并且内容在滑块上滑动。不确定我是否解释得更好了。我正在使用别人编写的现有代码，因此我正在尝试使用我所拥有的工作，但也许有更好的解决方案来运行它？也许通过css？我需要在窗口或文档加载时加载它并无限运行，但需要能够修改其css。我必须使用css变换来设置它。

- jessica mele

欢迎来到stackoverflow。 - www139

我几乎不理解你在问什么，因为我甚至不了解SVG，但是你可以在同一域上创建一个iframe来更直接地控制函数。只是一个想法。 - www139

如果它在每个单独页面的底部，只需在所需页面上设置填充。 - Adam Buchanan Smith

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bobby Orndorff · Accepted Answer

间隔被设置为永久运行。如果你从另一个脚本设置颜色，间隔将在下一次运行时覆盖颜色。一种选择是在从其他脚本设置颜色时停止间隔。你需要一个变量来保存间隔id。

var timer = null;

当启动间隔时，您需要保存间隔ID。

timer = setInterval(function(){
    setTimeout(function(){
        $('#path1').css('transform','scale(.75)');
        $('#path2').css('transform','scale(.75)');
        $('#path2').css('fill','#F7A700');
    }, 2000);
    $('#path1').css('transform','scale(1.50)');
    $('#path2').css('transform','scale(1.50)');
    $('#path2').css('fill','#FFCF55');
}, 4000);

在您的另一个脚本中，在设置颜色时停止间隔。

if (timer) {
    clearInterval(timer);
    timer = null;
}
$('#path2').css('fill','#00FF00');

编辑：

另一个可能的选项是使用布尔标志来停止动画的某些部分。这将允许您停止填充动画但继续其他动画。您需要一个布尔标志来指示是否应该进行填充动画。将标志初始化为true。

var animateFill = true;

使用标志来确定间隔是否应该对填充属性进行动画处理。

setInterval(function(){
    setTimeout(function(){
        $('#path1').css('transform','scale(.75)');
        $('#path2').css('transform','scale(.75)');
        if (animateFill){
            $('#path2').css('fill','#F7A700');
        }
    }, 2000);
    $('#path1').css('transform','scale(1.50)');
    $('#path2').css('transform','scale(1.50)');
    if (animateFill) {
        $('#path2').css('fill','#FFCF55');
    }
}, 4000);

在您的另一个脚本中，设置填充颜色时将标志设置为false。

animateFill = false;
$('#path2').css('fill','#00FF00');

如果您之后需要重新启动填充颜色的动画，则将标志设置回true。

animateFill = true;