在jquery脚本中使用变量

Question

我导入了我的脚本

<script src="/test.js"></script>

内容是

var test= $(document).find('aside#bar');
var list= test.find('ul');

然后我使用以下脚本附加字符串

<script>
$(document).ready(function () {
  $(list).text("testing message");
});
</script>

但是 chrome 控制台显示

Uncaught ReferenceError: list is not defined

如何在jquery中使用变量？

更新

我发现该页面中的所有脚本都不起作用

我用

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="/test.js"></script>
    <script>

$(document).ready(function () {
  $(document).html("testing message");
});
    </script>

但没有任何附加内容，chrome 控制台不记录任何内容

Answer 1

在 test.js 文件中声明一个局部变量。您必须使用

window.variableName

将其声明为全局，如下所示：

window.test= $(document).find('aside#bar');
window.list= test.find('ul');

然后您将能够从 after test.js 加载的其他 Javascript 文件访问它。

Answer 2

1. 检查 /test.js 是否正在 Chrome 中加载。我认为您提供给该文件的 URL 可能是错误的

   <script src="/test.js">
   

   打开 Chrome 的网络面板，然后重新加载页面。当

   test.js

   脚本尝试加载时，您是否看到红色错误消息？

   如果此页面是

   http://localhost/test/mypage.html

   ，那么

   src='/test.js'

   将加载

   http://localhost/test.js

   。因为一开始的

   /

   。因此，请检查 URL 路径并查看脚本是否首先加载。

2. test.js

   脚本只是说

   var test = ..., var list = ...

   。但此时，文档可能还没有加载！但是，当然，如果您的脚本

   test.js

   正确加载 - 那么它会显示

   test

   和

   list

   变量本身的错误。由于设置此变量时您没有看到错误，因此我的第一个猜测是

   test.js

   是 not 被加载。先修复脚本加载，然后修复脚本本身：

   $(document).ready(function() {
       var test = ...
       var list = ...
   });
   

3. 但是，当您尝试在其他地方使用test或

   list

   时，

   这也不起作用

   ！因为它们是使用

   var

   声明的。

   var

   仅创建局部变量，因此它们在函数外部不可用（如果您检查上面，我们将

   var test =..., var list = ...

   包装在

   function() { }

   内，因此它们在该函数外部不可用）。所以让他们喜欢：

   $(document).ready(function() {
       window.test = ...
       window.list = ...
   });
   

   您也可以通过删除

   var

   关键字来完成相同的任务，但这有其自身的问题。请务必先阅读 Javascript 变量作用域。

4. 对所有脚本标签使用类型或语言：

   <script language="javascript" type="text/javascript">
     $(document).ready(...)
   </script>
   

Answer 3

为什么文档准备好后不定义变量？？

你可以在脚本中尝试一下

$(
   var test= $(document).find('aside#bar');
   var list= test.find('ul');
);

和

<script>
$(document).ready(function () {
  $(list).text("testing message");
});
</script>

但我愿意

$(
       var test= $(document).find('aside#bar');
       var list= test.find('ul');
       $(list).text("testing message");
    );

最后....aside#bar 是什么？？？？

旁边是一个类？？你忘记了点吗？？ .一边??问题也许就在那里。

抱歉我的英语不好，希望这有帮助！再见！

Answer 4

只需使用

list.html("test message")

或

list.text("test message")

$(document).ready(function () {
  list.html("testing message");
});

演示

编辑：

并且因为在

test.js

中使用了jquery函数

<script src="jquery.js"></script>  <= First
<script src="test.js"></script> <= Second