如何在两个.js文件之间传递变量？

Question

我有一个Symfony应用程序，其中有一个菜单可以创建选项卡，并使用.js文件通过load()方法将指向每个菜单选项的URL加载到div中。这个.js文件是一个变量，作为引用每个创建的选项卡的计数器。可以在以下示例中看到这个想法：

http://jsfiddle.net/JMMS_85/o7610t24/

$("#tabs-"+tabCounter).load($(this).attr('href'));

加载到div中的URL有其他链接，因此我创建了另一个.js文件来阻止原始链接的“preventDefault()”，我必须在其中重新加载这些链接以显示新链接的URL。因此，我必须在另一个.js文件中使用变量计数器来知道实际选择的div是什么。

file1.js

 $(document).ready(function () {
$("#tabs").tabs();
   var tabCounter = 1;
   var cont =1;

        //Code creating the tabs omitted
 $(".container div a").on("click",function(event) {
    event.preventDefault(); 

        tabTitle = $(this).attr("title"),
        addTab();
        $("#tabs-"+tabCounter).load($(this).attr('href'));
        tabCounter++;
        $("#tabs").tabs({active: $('.ui-tabs-nav li:last').index()});
  });
 });

file2.js

$(document).ready(function () {

       $("a").click( function(event)
        {
        event.preventDefault();            

        $("#tabs-"+tabCounter).load(this.href);
    }); 

我的问题是如何在另一个文件中使用第一个 .js 文件的计数器变量。

- Joseph

---

我看了你的例子，但是在代码后面跟着的段落有点难以理解。你能否重新措辞一下？哦，还有Sebastien说的话。 - Daved

这道题不需要Symfony2标签。 - ghanbari

在我给你展示的例子中，每个tab的内容都会加载一段文本，但在我的项目中，url是通过load方法file1.js来加载的。问题是，在file1.js中使用的变量TabCounter需要在file2.js中被引用，以便我们找到要加载的所有相应url的选项卡。我添加了这两个.js文件，以使它看起来更轻盈。 - Joseph

添加“Symfony2”标签的原因是因为Symfony在我的项目中使用，所以一个解决此问题的选项是使用会话变量，但我很新于Symfony并且并未使用过。 - Joseph

Answer 1

您可以在函数外创建变量。

在这里，您可以了解JavaScript作用域的工作方式: http://www.w3schools.com/js/js_scope.asp

- Daniel Moreira

Answer 2

你可以使用jquery data将变量保存在DOM中。

例如：

设置初始值

$('#tabs').data('counter', 1);

获取值

var tabCounter = $('#tabs').data('counter');

增加数值

var tabCounter = $('#tabs').data('counter');
$('#tabs').data('counter', ++tabCounter);

演示

http://jsfiddle.net/o7610t24/3/

- Vic

---

我尝试了你说的，在file1.js中函数正常运行，但是如果我在file2.js中添加“var TabCounter = $ ('# tabs') data ('counter').”来检索file1.js中的值，则无法获得。我对这一切都很新，不知道是否正确，如果您认为应该在file2.js中工作，请告诉我应该如何做，谢谢。 - Joseph

仍然无法工作。问题不在第一个.js文件中，一切都很顺利，问题是我必须添加另一个.js文件页面以加载到每个选项卡的div中，这就是我必须在加载页面时引用load()方法来获取选项卡处于活动状态的位置，以显示div并隐藏其中的任何内容。我无法理解的是如何从外部.js文件中获取变量的值到另一个.js文件中。抱歉，不知道我是否解释清楚了。 - Joseph

@Joseph，为什么它不起作用？有什么问题吗？你能把你在file2中尝试的代码发出来吗？ - Vic

文件2中使用的代码已经发布在问题上，但是不用担心，我认为已经找到了另一种解决方法，而且我认为它可以正常工作。为了引用激活的div，我使用了一个属性来获取div的id，这样我就可以引用当前的div："var elemento=$("#tabs>div[aria-hidden='false']").attr("id"); $("#"+elemento).load(this.href);"无论如何，感谢您的帮助。 - Joseph