2

我对 JavaScript 很陌生(几个小时前才开始尝试让脚本正常工作)。我浏览了一些关于 W3 的教程,当我将它直接粘贴到我的 HTML 中时, “hello world”代码可以工作,但是我遇到了一个脚本问题(我也遇到了其他脚本的问题,但我不确定我做错了什么)。

我有这段代码,我想在我的 HTML 中进行测试,我复制了 HTML,它看起来一样,然后我在我的静态文件夹中创建了一个名为的文件edit.js并将 JavaScript 复制到其中(如图所示)。它在页面上没有任何错误,但是当我单击它时没有任何反应。我试图在其中粘贴一个 W3 'hello world'代码并且有效,但这个脚本没有。

我试图检查 Chrome 中的代码,这就是我看到上述错误的地方(在资源选项卡下)。我可以使用 Chrome 打开 js 文件,这让我认为 js 文件可以访问并正确指向,但我不确定如何让它工作。我使用 Jinja2 作为我的模板引擎来呈现 HTML,在我的标题中我有:

<script language="JavaScript" type="text/javascript" src="static/edit.js"></script>

在我的主模板(在所有页面上呈现的模板)中,我有:

<script language="JavaScript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

编辑.js:

(即使将它直接放在我想要使用它的页面上的脚本标记中也不起作用)

$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
   var showNew = $('#changevalue').val();
   $('#altervalue').hide();
   $('#storedvalue').show();
   $('#storedvalue span').text(showNew);
});​

HTML:

(它嵌入在更大的页面中)

    <head>
        <script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
        <script language="JavaScript" type="text/javascript" src="static/edit.js"></script>
    </head>
... my html code..
        <div id="wrapper">
           <div id="container">
              <div id="storedvalue"><span>Hello</span> [<a href="javascript:void(0);" id="editvalue">edit</a>]</div>
              <div id="altervalue" style="display:none;"><input type="text" name="changevalue" id="changevalue" value="Hello"> [<a href="javascript:void(0);" id="savevalue">save</a>]</div>
           </div>
        </div>

我从来没有能够成功运行 W3 上还没有的 JavaScript。即使我看到网上有人说他们对他们来说工作得很好,我也会遇到其他脚本同样的问题。我需要做任何额外的事情来完成这项工作吗?

我的两个问题是:

  • 我究竟做错了什么?
  • 因为 Javascript 在出现问题时似乎无法正常工作,有没有办法获取错误或有关实际错误的信息?

我读了 Uncaught ReferenceError: $ is not defined?在过去的一个小时里一直试图解决这个问题,但看不到我的问题。

4

4 回答 4

3
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

jQuery 的脚本标签应该在您的自定义 javascript 之前。

遵从edit.js

<script type="text/javascript" src="static/edit.js"></script>
于 2012-07-10T01:48:04.813 回答
3

首先,您需要先放置 jQuery 脚本标签。

其次,您需要执行以下操作之一:

  1. 将您的代码放入此函数中:

    $(document).ready(function(){/*CODE HERE*/});
    
  2. 或者像这样:

    $(function(){
        /*CODE HERE*/
    });
    

DOM 需要准备好才能使用它。将代码放在在 DOM 的就绪事件上执行的匿名函数中就是这样做的。

编辑:

$(function(){
   $('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
   $('#savevalue').click(function(e){
     var showNew = $('#changevalue').val();
     $('#altervalue').hide();
     $('#storedvalue').show();
     $('#storedvalue span').text(showNew);
   });​
});
于 2012-07-10T01:52:37.030 回答
2

尝试删除语言属性..有时对我有用。现在已经过时了..我想

于 2012-07-10T03:35:02.360 回答
0

您需要先包含 jquery,然后才能使用它。

于 2012-07-10T01:50:45.037 回答