0

JavaScriptとjQueryを使い始めたばかりで、作業を進めていくうちに理解しているので、これが基本的な質問である場合はお詫びします。私はいくつかの簡単なコードを書いています：

  • フォームから値を取得する
  • クッキーに保存する
  • Cookieから値を呼び出し、JS変数に保存します
  • JS変数を出力します

...しかし、私はそれを機能させることができません。Cookieが正しく設定されていることはわかりますが、何らかの理由で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ん。

document.writeまた、イベントハンドラーでは使用しないでください。HTMLが完全に解析された場合（およびDOMの準備ができた場合）、ドキュメントは閉じられます。その後に呼び出すとdocument.write、それがクリアされ、書き直されます。

ところで、個別のスクリプトを1つのスクリプトに結合すると、コードが読みやすくなる可能性があります。

<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);     
    });

});

#btnonclickのJavaScriptを見ると、Cookieを保存するための構文が間違っています。})スクリプトを壊す余分なものを追加しています。よくわからない場合は、Chromeの開発ツールまたはFirefoxのFirebugを使用して、コンソールを確認してください。JavaScriptエラーが出力されます。

于 2013-01-19T16:29:04.550 に答える
0

これらをそれぞれ別々に配置する必要はなく、$(document).ready(function()すべてを1つにまとめることができます。また、これの省略形は次のとおりです。

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