0

我刚刚开始使用 JavaScript 和 jQuery，并且正在解决问题，如果这是一个基本问题，我深表歉意。我有一些简单的代码写入：

  • 从表单中获取值
  • 将其存储到 cookie
  • 从 cookie 中调用值并将其存储在 JS 变量中
  • 打印 JS 变量

...但我无法让它工作。我可以看到 cookie 设置正确，但由于某种原因，我无法检索它并将其写入变量。这是我的代码，任何帮助将不胜感激！

<!-- CAPTURE A VALUE IN A SIMPLE FORM... -->
  <input id="txt" type="text" value="foo" />
  <input id="btn" type="button" value="1 - write cookie" />
  <input id="btntwo" type="button" value="2 - set cookie to variable" />
  <input id="btnthree" type="button" value="3 - print the cookie" />

<!-- WRITE THE VALUE TO THE COOKIE WHEN A USER CLICKS THE BTN... -->
  <script type="text/javascript">                                         
   $(document).ready(function () {
    $("#btn").on("click", function () {
      $.cookie('myCookie', $("#txt").val(), { expires: 365 });
      });
    });                              
  </script> 

<!-- SET THE COOKIE VALUE TO A VARIABLE WHEN A USER CLICKS THE BTNTWO... -->
<script type="text/javascript">   
$(document).ready(function() {
  $("#btntwo").on("click", function () {
    var cookVal = $.cookie('myCookie')
  });
});
</script>     

<!-- PRINT THE COOKIE VALUE ON THE SCREEN WHEN A USER CLICKS THE BTNTHREE... -->
<script type="text/javascript">   
$(document).ready(function() {
  $("#btnthree").on("click", function () {
    document.write(cookVal);     
  });
});
</script>
4

3 回答 3

2

您的cookVal变量是 click-handler 函数的本地变量，外部的任何东西都无法访问它。

此外，不要document.write在事件处理程序中使用。如果 HTML 已完全解析（并且 DOM 已准备好），则文档将关闭。之后调用document.write将清除它并重写它。

顺便说一句，您可以将单独的脚本合并到一个单独的脚本中，这可能会使代码更具可读性。

<input id="txtin" type="text" value="foo" />
<button id="btn">write cookie</button>
<button id="btntwo">2 - set cookie to variable</button>
<button id="btnthree">3 - print the cookie</button>
<output id="txtout" />

<script type="text/javascript">                                         
$(document).ready(function () {
  <!-- WRITE THE VALUE TO THE COOKIE WHEN A USER CLICKS THE BTN... -->
  $("#btn").on("click", function () {
    $.cookie('myCookie', $("#txtin").val(), { expires: 365 });
  });
  <!-- SET THE COOKIE VALUE TO A VARIABLE WHEN A USER CLICKS THE BTNTWO... -->
  var cookVal; // declared local to the whole onready function
  $("#btntwo").on("click", function () {
    cookVal = $.cookie('myCookie');
  });
  <!-- PRINT THE COOKIE VALUE ON THE SCREEN WHEN A USER CLICKS THE BTNTHREE... -->
  $("#btnthree").on("click", function () {
    $("#txtout").val(cookVal);     
  });
});
</script>

jsfiddle.net 上的演示

于 2013-01-19T16:30:51.120 回答
1

首先，您不需要多种$(document).ready方法。

尝试时会输出什么：

$(document).ready(function () {

    $("#btn").on("click", function () {
       $.cookie('myCookie', $("#txt").val(), { expires: 365 });
    });                              

    var cookVal = 'NOT SET';

    $("#btntwo").on("click", function () {
       cookVal = $.cookie('myCookie')
    });

    $("#btnthree").on("click", function () {
       document.write(cookVal);     
    });

});

如果您查看 JavaScript 的#btnonclick，则保存 cookie 的语法是错误的。您正在添加一个额外的})内容，这会破坏脚本。如果您不确定，请使用 Chrome 中的开发者工具或 Firefox 中的 Firebug，然后查看您的控制台。JavaScript 错误在那里输出。

于 2013-01-19T16:29:04.550 回答
0

您不必将它们中的每一个放在一个单独的位置$(document).ready(function()，您可以将它们全部放在一个中。此外，它的简写是：

$(function(){
............
});
于 2013-01-19T16:29:33.707 回答