Question

我对JavaScript和一般编程都很陌生。我想我会以错误的方式解决这个问题，但我会尝试解释我正在尝试做什么以及我是如何做的。它不起作用。

我创建了一个包含五个框的页面，您可以单击它。单击一个时，它将运行存储在一个js文件中的函数，并查看案例以查找匹配的函数，然后更改文本框中的文本以及下面五个框中的选项。我认为我遇到的问题是全局变量没有从一个包含的.js文件转移到另一个.js文件。

我想不出另一种方法。我不能只返回一个变量，因为我需要为每个选项的每个case语句更改大约5个单独的变量。有没有比这些看似无效的$选择变量来回传递这些信息更好的方法？

file 1.js

var $choice1 = "0";
var $choice2 = "0";
var $choice3 = "0";
var $choice4 = "0";
var $choice5 = "0";

//Main Body - start doing stuff once the page has loaded    
$( document ).ready(function() {    

//Run once
NewArea("newgame");

$("#choice1").click(function() {
    NewArea($choice1);
    });

$("#choice2").click(function() {
    NewArea($choice2);
    });

$("#choice3").click(function() {
    NewArea($choice3);
    });

$("#choice4").click(function() {
    NewArea($choice4);
    });

$("#choice5").click(function() {
    NewArea($choice5);
    });

});

然后我们有文件2.js

function NewArea($area) {
    switch($area)
    {
    case "newgame": //Start of the game
        $("#textbox").html("blah");
        $("#choice1").html("Look around");
            $choice1 = "look_1";
        $("#choice2").html("Listen around");
            $choice1 = "listen_1";
        $("#choice3").html("Smell around");
            $choice1 = "smell_1";
        $("#choice4").html("Feel around");
            $choice1 = "feel_1";
        $("#choice5").html("Taste around");
            $choice1 = "taste_1";
        break;

    case "look_1":
        $("#textbox").html("blah2");
        $("#choice1").html("");
            $choice1 = "0";
        break;

    default:
        break;
    }
}

Answer 1

像这样使用

<script type='text/javascript' > 
  window.$choice1 = "0";
  window.$choice2 = "0"; 
  window.$choice3 = "0";
  window.$choice4 = "0";
  window.$choice5 = "0";
</script>

然后在链接file1.js和file2.js

下方

Answer 2

为了清晰起见并且代码稍微清晰，您至少应该考虑命名空间全局变量。你也可以把它变成一个数组而不是离散的变量，这样你就可以在必要的时候轻松扩展它们（记住你的id的索引将会偏离1，因为数组是0索引的）：

var myGame = {
    choices: [0, 0, 0, 0, 0];
};

正如其他人所提到的，关键是这段代码在file2.js之前加载（通过在file1.js和file2.js之前将其加载到单独的文件中，或者确保file2.js在file2.js之前加载）。

你提到你不知道另一种方法，看起来你正在使用DOM-gnostic jQuery方法，所以其他可能有用的东西（虽然不一定更好）是：

在隐藏的输入字段中存储选项。这将使您的DOM混乱而不是全局命名空间。 ;）所以你可以拥有<input type='hidden' value='0' name='choice1Value'/>，然后在那里获取/设置值。
您还可以使用jQuery data函数将值存储在每个选项上：例如$('#choice1').data('choice', 0);。

您还可以考虑其他重构，但这取决于文件的结构以及如何加载它们，但希望这提供了一些关于不同方法的想法。

JavaScript - 如何在.js文件之间传递全局变量？

2 个答案: