Question

EDIT2 ：这是控制台日志。图像正在转换为画布（HTML5），我需要以某种方式将其“返回”到全局变量。建议？

<img id="mainIllustration" alt="main illustration" src="Img/Model01.png">
Illust...o_03.js (line 24)
<canvas id="mainIllustration" class="" width="278" height="659" style="" title="" tabindex="-1">
Illust...o_03.js (line 32)
<img id="mainIllustration" alt="main illustration" src="Img/Model01.png">
Illust...o_03.js (line 24)
<canvas id="mainIllustration" class="" width="278" height="659" style="" title="" tabindex="-1">
Illust...o_03.js (line 32)
<img id="mainIllustration" alt="main illustration" src="Img/Model01.png">
Illust...o_03.js (line 24)
<canvas id="mainIllustration" class="" width="278" height="659" style="" title="" tabindex="-1">

编辑1 ：我开始怀疑问题是否与Pixastic有关，它操纵图像的事实，我需要返回到全局图像变量（eMainIllustration）。我怎么做到这一点？

原始讯息：

所有

我正在使用pixastic库，并且看起来非常简单，全局/局部变量让我感到非常困惑。

我有两组代码，其中一个变量是全局定义的（最终是我想要的）＆amp;另一个变量是本地定义的。

下面的第一个代码工作正常，变量（eMainIllustration）是本地定义的，函数运行良好。

    var eDisplayTableSlideState = false;
    function displayTableSlideIn()
    {
// eMainIllustration is locally defined
        var eMainIllustration = document.getElementById("mainIllustration");
        if (eDisplayTableSlideState === false)
        {
            $("#displayTable").animate ({top: "-=33px", left: "+=66px", width: "-=198px", height: "-=48px"}, 750, "swing",function()
            {
                Pixastic.process (eMainIllustration,"blurfast", {amount: 0.1});
            return (eDisplayTableSlideState = true);
        } else
        {
            $("#displayTable").animate ({top: "+=33px", left: "-=66px", width: "+=198px", height: "+=48px"}, 500, "swing",function()
            {
                Pixastic.revert(eMainIllustration);
            });
            return (eDisplayTableSlideState = false);
        }
    }

但是，当我全局设置变量（eMainIllustration）时，函数的第一个if语句有效，但函数'else'部分的pixastic.revert代码却没有。为什么呢？

// eMainIllustration is locally defined
var eMainIllustration = document.getElementById("mainIllustration");
    var eDisplayTableSlideState = false;
    function displayTableSlideIn()
    {
        if (eDisplayTableSlideState === false)
        {
            $("#displayTable").animate ({top: "-=33px", left: "+=66px", width: "-=198px", height: "-=48px"}, 750, "swing",function()
            {
                Pixastic.process (eMainIllustration,"blurfast", {amount: 0.1});
            return (eDisplayTableSlideState = true);
        } else
        {
            $("#displayTable").animate ({top: "+=33px", left: "-=66px", width: "+=198px", height: "+=48px"}, 500, "swing",function()
            {
                Pixastic.revert(eMainIllustration);
            });
            return (eDisplayTableSlideState = false);
        }
    }

我想知道这是不是因为我没有通过函数的前半部分（如果）返回已更改的状态（eMainIllustration）。那是对的吗？我将如何实现这一目标？

最佳，

Answer 1

如果你在函数内警告或console.log变量，会发生什么？我有使用函数定义全局变量的问题。

我要去的地方就是DOM可能没准备好了。尝试使用：

if(window.addEventListener) {
    window.addEventListener('DOMContentLoaded', function() {
        //DOM is now ready. Set your global variables value here.
    });
} else {
    //If internet explorer, use attachEvent method.
}

Answer 2

这可能是由于您的Javascript在页面上的位置。

如果你在页面顶部有它，那么在加载javascript之前可能没有加载mainIllustration dom元素。

如果你将它移动到body标签的正上方，那么变量将被填充，因为dom将在javascript加载时完全加载。

因此，当你在调用函数之前加载dom时，它在函数内部工作，但如果它在函数之外则不起作用。

var eMainIllustration = document.getElementById("mainIllustration");

编辑

<script type="text/javascript">
    $(document).ready(function() {
        load("path_to_javasript");
     });
</script>

Answer 3

我想出来了。

如果有人对Pixastic如何运作有任何困惑，这就是我的理解，以及我问题的解决方案。

pixastic blurfast（＆amp; blur）插件'还原功能'仅将元素恢复为原始状态。换句话说，你没有添加另一个效果，但告诉pixastic取消所有的更改＆amp;用原始状态替换元素。

请记住，添加像素效果时，图像不再是图像，而是HTML5画布元素，在这种情况下，正在取消，原始“图像”将被放回原位。

全球变量＆amp;通过在函数末尾使用'return'解决局部变量问题。实际上，这部分不是实际问题，问题在于我（错误地）试图实现的恢复实现。

希望这有助于某人。

Javascript - 全局和;之间的混淆局部变量

3 个答案: