• 締切済み

jqueryでの表示について

jqueryを使用したjavascript上で、「変数　userId」を用意しました。 この後ろに英数記号をつけたものをuniqueid5としました。 var uniqueid5 = userId+'Qre3I'; 出来たこと $('input[name~="uniqueid5"]').val(uniqueid5); とし、 <input type="text" name="uniqueid5" value="" /> と記入したところ、テキストボックスの中に「userId(変数)+’Qre3I’」が無事表示されました。 出来なかったこと <script> document.write("<p>" + uniqueid5 + "</p>"); </script> としたのですが、何も表示されません。 どこが間違っているのかご指摘いただけませんでしょうか?

みんなの回答

noname#207526
noname#207526
回答No.3

上手く表示されるかは、スコープの関係もあるのでソースをよく見る必要がありますね。 document.writeでテストするよりも、$(...).html などを試した方が一貫性があると思います。

回答No.2

varつけたらローカル変数として扱われるし、どんな順序で呼ばれるか検証していないけど コールバック関数で呼ばれているなら何らかの実行後に値が入ってくるんじゃないのかな。 単にhtml上に表示したいなら <p id="hoge"></p>という表示エリアを作っておいて valに表示するところで$('#hoge').html(uniqueid5 );がいいんじゃない？

tajix14
質問者

補足

有難うございます。どうしてもjavascript内で表示しなければならない事情なのです。 >コールバック関数で呼ばれているなら何らかの実行後に値が入ってくるんじゃないのかな。 有難うございます。もう少し弄ってみます。

回答No.1

全文見せてくれないとわからない。 変数のスコープの問題とかどう？ それかdocument.writeをどこで実行しているか？

tajix14
質問者

補足

有難うございます。 ソースは下記のようなかたちです。 あるゲームでユーザーごとにユニークidを振るにあたり、ゲームへの参加数のsubmit回数 をユニーク値として保存、それに英数記号を振ったものをuniqueid5としています。 (バックにプロバイダから与えられた別のAPIがありますので、下記のかたちで 少なくともテキストボックスにはユニーク値を振ることが可能です) <head> <script> function UserInfo(){ //ユーザ認証 game.auth(authSuccessCallback, failureCallback); } //ユーザ認証の成功 function authSuccessCallback(data){ //ユーザID取得 var data = { Id: USER_ID }; game.getUserId(userSuccessCallback, failureCallback, data); } function userSuccessCallback(userId){ //submit回数をユニーク値として取得 var data = { score: unique, Id: USER_ID }; game.submitScore(submitIdSuccessCallback, failureCallback, data); //ユニークid作成 var uniqueid5 = unique+'Q!f0lwI'; //テキストボックス用 $('input[name~="uniqueid5"]').val(uniqueid5); } function submitIdSuccessCallback(){} </script> </head> <html> <input type="text" name="uniqueid5" value="" /> 上記は表示されます <script> document.write("<p>" + uniqueid5 + "</p>"); </script> 上記は表示されません </html> 試しに下記のようにしてところ、今度はdocument.writeのみが表示され、input type="text" の方は表示されませんでした。何かヒントになりますでしょうか? 宜しくお願い致します。 <script> var userId55 = '14775'; var uniqueid555 = userId55+'Q!f0lwI' $('input[name~="uniqueid555"]').val(uniqueid555); </script> <input type="text" name="uniqueid555" value="" /> <script> document.write("<p>" + uniqueid555 + "</p>"); </script>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jQueryで複数の要素オブジェクトを取得したあと

    jQueryで複数の要素オブジェクト(というの？)を取得するケースで、jQueryオブジェクトとして扱えなくなっていることが気持ち悪く、ここをどうにかできないかという話です。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <input type="text" id="ii1" name="nn" value="マツコ"> <input type="text" id="ii2" name="nn" value="竹田"> <input type="text" id="ii3" name="nn" value="小梅太夫"> <script> jQuery(function ($) { 　　alert($("#ii1").val()); // (0) 　　alert($("[name=nn]:eq(1)").val()); // (1) 　　alert($("[name=nn]:first-child").val()); // (2) 　　alert($("[name=nn]")[2].value); // (3) 　　alert($("[name=nn]").get(1).value); // (4) }); </script> このソースで、(0)はいいとして、(1)(2)のようにオブジェクトが一つしか返らないような場合には、「.val()」メソッドが使えます。しかし(3)(4)の場合には、少なくともこのままでは「.val()」メソッドが使えないため、Elementオブジェクトのvalueプロパティを使用しています。 値を取得するコードで「.val()」「value」が混在しているのが気持ち悪く、「value」に統一したいです。ちなみに実際には「$("[name=nn]")」のように取得したあと、for文でまわして処理するケースが多いです。 「$("[name=nn]")」で取得し、オブジェクトの件数をカウントしたあと苦肉の策で、for文の中で「$("[name=nn]:eq(" + i + ")").val()」等と書いたこともありますが、むしろ読みにくくなってしまっています。これだったらまだvalueプロパティを使う方がいいかと思います。 「$("[name=nn]")」で複数のオブジェクトを取得した後で、それぞれのオブジェクトに「.val()」を使う方法はありますでしょうか？あるのなら具体的に教えてください。 よろしくお願いします。

  • jQuery　変数の使い方について

    jQuery　変数の使い方について 【やりたいこと】 ラジオボタンが複数ある為現在のアクションをまとめたい。 ■ $("input:radio[name='radio01']:checked").val(); の'radio01'の部分に変数を使いたい。 ■document.forms["MON"].hradio02.value の"MON"のフォーム名と、「hradio02」name部分に変数を使いたい。 http://kaicoo.blogspot.jp/2012/03/query_30.html 等を参考に元のソースから JSをまとめてみましたが、うまくいきません。 jQuery内の変数の記述方法を 教えていただけませんでしょうか？ よろしくお願いいたします。 ★JSをまとめたサンプルソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script src="jquery.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function setVal(obj) { var formname = obj.form.name; var radioname = obj.getAttribute('name'); alert(formname); alert(radioname); //選択したラジオのvalueをhiddenに格納する document.forms[formname].h '+ radioname +' .value = $("input:radio[name='+ radioname +']:checked").val(); alert(document.forms[formname].h '+ radioname +'.value); } //--> </script> </head> <body> <table border="1"> <FORM name="MON"> <tr> <td> 結果: </td> <td> <input type="radio" name="radio01" value="良好" onClick="setVal(this);" >良好 <input type="radio" name="radio01" value="不良" onClick="setVal(this);"> 不良 <input type="hidden" name="hradio01" value="未入力です。"> </td> </tr> <tr> <td> 結果2: </td> <td> <input type="radio" name="radio02" value="良好" onClick="setVal(this);" >良好 <input type="radio" name="radio02" value="不良" onClick="setVal(this);"> 不良 <input type="hidden" name="hradio02" value="未入力です。"> </td> </tr> </table> </Form> </body> </html> ★元のソースのサンプル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script src="jquery.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function setVal_01(obj) { document.forms["MON"].hradio01.value = $("input:radio[name='radio01']:checked").val(); alert(document.forms["MON"].hradio01.value); } //--> </script> <script type="text/javascript" language="JavaScript"> <!-- function setVal_02(obj) { document.forms["MON"].hradio02.value = $("input:radio[name='radio02']:checked").val(); alert(document.forms["MON"].hradio02.value); } //--> </script> </head> <body> <table border="1"> <FORM name="MON"> <tr><td> 結果: </td> <td><input type="radio" name="radio01" value="良好" onClick="setVal_01(this);" >良好 <input type="radio" name="radio01" value="不良" onClick="setVal_01(this);"> 不良 <input type="hidden" name="hradio01" value="未入力です。"> </td> </tr> <tr> <td> 結果2: </td> <td> <input type="radio" name="radio02" value="良好" onClick="setVal_02(this);" >良好 <input type="radio" name="radio02" value="不良" onClick="setVal_02(this);"> 不良 <input type="hidden" name="hradio02" value="未入力です。"> </td> </tr> </table> </Form> </body> </html>

  • javascriptで別ファイルで変数を取得する。

    A.htmlで入力した文字をB.htmlに出るようにしたいのですが、全然出ません。 アラートは表示されるのですが、入力欄に何を打っても、　namae と出てしまいます。変数に何も入ってないようです。 これを〔javascript〕って入力すれば、アラートに〔javascript〕って出るようにしたいのですが、どうしたらよろしいでしょうか？ 〔A.html〕 <script type="text/javascript"> var val=namae; window.localStorage.setItem("result", val); </script> <form action="B.htm" id="form1" method="post" onsubmit="check()"> <p>名前<br><input type="text" name="namae" id="buttom" size="28" /></p> <input type="submit" value="送信"/> </form> 〔B.html〕 <script type="text/javascript"> var val = window.localStorage.getItem("result"); alert(val); </script>

  • jqueryで抽出した文字をURLに代入したい

    下記のように他のページhoge.ne.jp/read1000.phpからスクレイピングしたtakahashiという文字を、メインメインサイトhogehoge.jp/index.htmlの<input type="text">内に表示可能なスクリプトがあります。 【現在できていること】 ***************************************************************** 【http://hoge.ne.jp/read1000.php】 <table border="1"> <tbody> <tr> <td class="class3_sql_name">takahashi</td> </tr> </tbody> </table> 【http://hogehoge.jp/index.html】 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <script> // 引っ張ってきたいサイトのURL url = 'http://hoge.ne.jp/read1000.php'; $.get(url, function(data){ var content3_sql_name = $(data.responseText).find('.class3_sql_name').text(); 　　$("[name='ca2_stock_name']").val(content3_sql_name); }); </script> <input type="text" name="ca2_stock_name" value="" /> ***************************************************************** 上記のスクリプトを実行すると、 <input type="text" name="ca2_stock_name" value="takahashi" /> という形が完成します。 ****************************************************************** 【やりたいこと】 <input type="text" name="ca2_stock_name" value="takahashi" /> ではなく、 <a href="stock.php?name=takahashi">個人ページに移動</a> というように、スクレイピングしたtakahashiの文字をURL内に表示したいと考えています。 考え方としては、変数として切り取り、URL内に　+my_name+ という形で代入しようと思います。 ダメだったスクリプトその1 <script> url = 'http://hoge.ne.jp/read1000.php'; $.get(url, function(data){ var content3_sql_name = $(data.responseText).find('.class3_sql_name').text(); }); </script> <a href="stock.php?name="+content3_sql_name+"">個人ページに移動</a> ダメだったスクリプトその2 <script> url = 'http://hoge.ne.jp/read1000.php'; $.get(url, function(data){ var content3_sql_name = $(data.responseText).find('.class3_sql_name').text(); }); var my_name = .text(content3_sql_name); </script> <a href="stock.php?name="+my_name+"">ストックページに移動</a> 上記のように2つを試したのですが、takahashiという文字が代入されることはありませんでした。 どうすれば、takahashiという文字をURLに代入させることができるでしようか? よろしくお願いいたします。

  • jquery上で2つのスクリプトの合体

    下記のように「サブページその1 　hoge.ne.jp/read1000.php」からスクレイピングしたtakahashiという文字を、「メインページ　hogehoge.jp/index.html」の<input type="text">内に表示可能なスクリプトがあります。【現在できていること その1】 また、メインページで取得した変数123456を、URLという形で「サブページ2 read2222.php」のPHPに渡し、サブページ2の中で「123456についてのPHP処理した結果」を、再度メインページで取得して表示するスクリプトがあります。【現在できていること その2】 【やりたいこと】 この2つのスクリプトを合体させ「サブページ1 read1000.php」からスクレイピングしたtakahashiという文字を、URLという形で「サブページ2 read2222.php」のPHPに渡し、サブページ2の中で「takahashiについてのPHP処理した結果」を、再度メインページで取得して表示したいというのが今回の趣旨で、スタックしている部分となります。 ***************************************************************** 【現在できていること その1】 【サブページその1 http://hoge.ne.jp/read1000.php】 <table border="1"> <tbody> <tr> <td class="class3_sql_name">takahashi</td> </tr> </tbody> </table> 【メインページ　http://hogehoge.jp/index.html】 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <script src="js/jquery.xdomainajax.js"></script> <script> // 引っ張ってきたいサイトのURL url = 'http://hoge.ne.jp/read1000.php'; $.get(url, function(data){ var content3_sql_name = $(data.responseText).find('.class3_sql_name').text(); 　　$("[name='ca2_stock_name']").val(content3_sql_name); }); </script> <input type="text" name="ca2_stock_name" value="" /> ***************************************************************** 上記のスクリプトを実行すると、 <input type="text" name="ca2_stock_name" value="takahashi" /> という形が完成します。 ****************************************************************** 【現在できていること その2】 【サブページその2 http://hoge.ne.jp/read2222.php】 <div id="news200"> こんにちは <?php echo $_GET["name"]; ?> さん </div> 【メインページ　http://hogehoge.jp/index.html】 <script type="text/javascript"> var usr_id='123456' $(function(){ $("#read200").load("https://hoge.ne.jp/read2222.php?name="+usr_id+" #news200 ul", function(data) { if(data == null){ $("#read200").append("読込みに失敗しました"); } }); }); </script> <div id="read200"></div> ***************************************************************** 上記のスクリプトを実行すると、 メインページ 上で、サブページ2の<div id="news200"/>....<div> 間を拾ってきて表示することができます。 　　　　　　　　　　　　　　　→　こんにちは123456さん メインページ内で「read2222.php?name="+usr_id+"」という形でURLとして一旦サブページ2にトスし、 $_GET["name"]　でサブページで処理しものをあらためてメインページで表示させています。 ***************************************************************** 【やりたいこと】 上記の2つのスクリプトを合体させ、 var usr_id='123456'　の代わりに、 【http://hoge.ne.jp/read1000.php】にある<td class="class3_sql_name">takahashi</td> のtakahashiを表示させたいと考えています。 　　　　　　　　　　　　　　　→　こんにちはtakahashiさん 考え方としては var content3_sql_name　の変数をvar usr_idの代わりにすればいいだけです。 ************************************************************** 【試したがうまくいかなかったスクリプト】 <script type="text/javascript"> url = 'http://hoge.ne.jp/read1000.php'; $.get(url, function(data){ var content3_sql_name = $(data.responseText).find('.class3_sql_name').text(); $(function(){ $("#read200").load("https://hoge.ne.jp/read5555.php?name="+content3_sql_name+" #news200 ul", function(data1) { if(data1 == null){ $("#read200").append("読込みに失敗しました"); } }); }); }); </script> <div id="read200"></div> ********************************************************** どこがいけないのかご指導いただけませんでしょうか? 宜しくお願い致します。

  • javascriptの計算結果をvalue=""に

    javascriptの計算結果をフォームの中のvalue=""内部に表示し、送信できるようにしたいというのが質問の趣旨です。 　　　　　　　　　　　　　　　　記 下記の2つのファイルで、フォームから入力した数値同士の「足し算の結果」を表示できます。 （HTMLファイル下段　<p id="message"></p>の部分で表示します。） ******************************************** 【HTML】 <script language="JavaScript" type="text/javascript" src="js/culc.js"></script> <form name="f1"> <input type="text" id="text1" name="text1" size="10" maxlength="10" />+ <input type="text" id="text2" name="text2" size="10" maxlength="10" /> <input type="button" value="足す" onclick="readText()" /> </form> <p id="message"></p> ******************************************* 【JAVASCRIPT(culc.js)】 function readText() { var text1 = document.getElementById("text1"); var text2 = document.getElementById("text2"); var message = document.getElementById("message"); var str_val1 = text1.value; var str_val2 = text2.value; var sum; if (isNaN(str_val1) || str_val1 == "" || isNaN(str_val2) || str_val2 == "") { textMessage = "数値以外の文字が入っています"; } else { //sum = str_val1 + str_val2; sum = parseFloat(str_val1) + parseFloat(str_val2); textMessage = "合計は、" + sum + "です"; } message.innerHTML = textMessage; } ************************************************ 【質問】 次にこのHTMLを改造し、フォームから計算値を送信することとしました。 ************************************************ 【HTML】 <script language="JavaScript" type="text/javascript" src="js/culc.js"></script> <form name="f1"> <input type="text" id="text1" name="text1" size="10" maxlength="10" />+ <input type="text" id="text2" name="text2" size="10" maxlength="10" /> <input type="button" value="足す" onclick="readText()" /> </form> <form action="form.cgi" method="post" name="form2" id="form2"> <input type="hidden" name="plus" value="<p id="message"></p>"> <input type="button" value="送信" onClick="disableButton()" name="button1"> </form> ************************************************ 問題点 上記のように、計算結果を表示出来るはずの<p id="message"></p>を送信フォームのvalue=の直後に記載しただけなのですが、なぜか送れません。 <p id="message"></p>　を独立して記載しているときは計算値をそのまま表示していたのですが、value="<p id="message"></p>">　と　value=　の中に記載した瞬間に単なる文字の羅列になってしまうようです。 value="<p id="message"></p>"> value='<p id="message"></p>'> value="<p id='message'></p>"> value='<p id='message'></p>'> と試してみましたが、いずれもうまきませんでした。 どのようにすれば、value=""　の中に計算結果が入るか教えてください。 宜しくお願い致します。

  • jQueryが読み込めない

    下記のようにサンプルコードを入力し、同一ファイル内にjsファイルを設置しているのですが、機能せず、ただのテキストボックスが表示されるのみです。 大変初歩的な質問ですが、よろしくお願いします。 ■ｐｈｐファイル <body> <form action="" method=""> <label for="user-name">お名前</label><input type="text" id="user-name"><br> <label for="user-kana">フリガナ</label><input type="text" id="user-kana"> </form> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.autoKana.js"></script> <script> $(document).ready(function(){ $.fn.autoKana('#user-name', '#user-kana', {katakana:true}); }); </script> </body> ■jquery.autoKana.js (function ($) { $.fn.autoKana = function (element1, element2, passedOptions) { var options = $.extend( { 'katakana': false }, passedOptions); var kana_extraction_pattern = new RegExp('[^ 　ぁあ-んー]', 'g'); var kana_compacting_pattern = new RegExp('[ぁぃぅぇぉっゃゅょ]', 'g'); var elName, elKana, active = false, timer = null, flagConvert = true, input; elName = $(element1); elKana = $(element2); active = true; _stateClear(); elName.blur(_eventBlur); elName.focus(_eventFocus); elName.keydown(_eventKeyDown); function start() { active = true; }; function stop() { active = false; }; function toggle(event) { var ev = event || window.event; if (event) { var el = Event.element(event); if (el.checked) { active = true; } else { active = false; } } else { active = !active; } }; function _checkConvert(new_values) { if (!flagConvert) { if (Math.abs(values.length - new_values.length) > 1) { var tmp_values = new_values.join('').replace(kana_compacting_pattern, '').split(''); if (Math.abs(values.length - tmp_values.length) > 1) { _stateConvert(); } } else { if (values.length == input.length && values.join('') != input) { _stateConvert(); } } } }; function _checkValue() { var new_input, new_values; new_input = elName.val() if (new_input == '') { _stateClear(); _setKana(); } else { new_input = _removeString(new_input); if (input == new_input) { return; } else { input = new_input; if (!flagConvert) { new_values = new_input.replace(kana_extraction_pattern, '').split(''); _checkConvert(new_values); _setKana(new_values); } } } }; function _clearInterval() { clearInterval(timer); }; function _eventBlur(event) { _clearInterval(); }; function _eventFocus(event) { _stateInput(); _setInterval(); }; function _eventKeyDown(event) { if (flagConvert) { _stateInput(); } }; function _isHiragana(chara) { return ((chara >= 12353 && chara <= 12435) || chara == 12445 || chara == 12446); }; function _removeString(new_input) { if (new_input.match(ignoreString)) { return new_input.replace(ignoreString, ''); } else { var i, ignoreArray, inputArray; ignoreArray = ignoreString.split(''); inputArray = new_input.split(''); for (i

  • AJAXの計算式の中にIF文を入れて表示したい

    下記の2つのファイルで、フォームから入力した数値同士の「足し算の結果」をAJAXで表示できます。 ******************************************** 【HTMLフォーム】 <script language="JavaScript" type="text/javascript" src="js/culc.js"></script> <form name="f1"> <input type="text" id="text1" name="text1" size="10" maxlength="10" /> + <input type="text" id="text2" name="text2" size="10" maxlength="10" /> <input type="button" value="足す" onclick="readText()" /> </form> <p id="message"></p> ******************************************* 【JAVASCRIPT(culc.js)】 function readText() { var text1 = document.getElementById("text1"); var text2 = document.getElementById("text2"); var message = document.getElementById("message"); var str_val1 = text1.value; var str_val2 = text2.value; var sum; if (isNaN(str_val1) || str_val1 == "" || isNaN(str_val2) || str_val2 == "") { textMessage = "数値以外の文字が入っています"; } else { //sum = str_val1 + str_val2; sum = parseFloat(str_val1) + parseFloat(str_val2); textMessage = "合計は、" + sum + "です"; } message.innerHTML = textMessage; } ************************************************ 【質問】 このjavascriptを改造し、入力した数値についての「足し算の結果」が正の数だった場合には「正の数」、負の数だった場合は「負の数」と表示すべく改造しております。下記の改造を施したのですが、うまく表示されません。 下記の文のどこが誤りか修正頂けませんでしょうか? 宜しくお願い致します。 【JAVASCRIPT(culc2.js)】 function readText() { var text1 = document.getElementById("text1"); var text2 = document.getElementById("text2"); var message = document.getElementById("message"); var str_val1 = text1.value; var str_val2 = text2.value; var sum; if (isNaN(str_val1) || str_val1 == "" || isNaN(str_val2) || str_val2 == "") { textMessage = "数値以外の文字が入っています"; } else { //sum = str_val1 + str_val2; sum = parseFloat(str_val1) + parseFloat(str_val2); textMessage = "(if((sum > 0) { document.write("正の数"); } else((sum <= 0) { document.write("負の数"); } ))"; } message.innerHTML = textMessage; }

    • ベストアンサー
    • AJAX
  • jqueryキャラ診断での外部テキストの利用

    初級レベルの質問かと思いますが、お答え頂けると助かります。 ドットインストールというプログラミングの勉強サイトを利用しているものです。 現在キャラ診断のソースを改造して色々試しています。 ■質問内容 下記に元となるソースを転載しております。 このソース内に var types = ['勇者','魔法使い','戦士','遊び人','スーパースター']; という部分があり、ここを色々と増やしたいと思いますが、ひたすらここに追加すると非常に管理がしにくくなってしまいます。 そこで、ここの'勇者'や'魔法使い'という、診断結果に表示する項目部分を外部テキスト（おそらくcsvやxmlなどでしょうか？）にするにはどうすればいいでしょうか？ はじめてコチラで質問しているため、質問の仕方などおかしいかもしれませんが、お教え頂ければと思います、宜しくお願いします。 ▼ドットインストールにある元ソース（http://dotinstall.com/lessons/shindan_js/4803） <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <title>キャラ診断</title> </head> <body style="text-align:center;"> <h1>キャラ診断</h1> <p><input type="text" id="name" value=""></p> <p><input type="button" id="shindan" value="診断!"></p> <h2>診断結果</h2> <p id="result">こちらに結果が表示されます。</p> <script> $('#shindan').click(function() { var name = $('#name').val(); var types = ['勇者','魔法使い','戦士','遊び人','スーパースター']; var type = types[Math.floor(Math.random() * types.length)]; var result = name + 'さんは「' + type + '」タイプです！'; $('#result').text(result); }); </script> </body> </html>

  • jquery htmlのcookie保存・表示

    まず、やろうとしていることはボタンをクリックし、その中身と同じデータを持つものを xmlから読み込み表示します。 次にそこから他のページへ移動して、戻ってきたときに最後に表示していた内容を そのまま表示させたいのです。 crome、ieにて動作確認をさせたいです。 現状のソースです、 <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <script language="JavaScript" type="text/javascript" src="../jq/jquery-1.7.2.min.js"></script> <script language="JavaScript" type="text/javascript" src="../jq/jquery.cookie.js"></script> <script type="text/javascript"> $(function(){ if($.cookie("name")){ $("#newbox").html($.cookie("name")); } $('#buttons button').click(function(){ var val = $(this).text(); $.ajax({ url:"index.xml", type:"get", dataType:"xml", timeout:1000, cache:false, error:function(){ alert("error"); }, success:function(xml){ var listdata=""; $(xml).find("list").each(function(){ var name=$(this).find("name").text(); // var imgs=$(this).find("imgs").text(); // var price=$(this).find("price").text(); // $(this).children().each(function(){ if($(this).text()==val){ listdata+='<ul><li>'+name+'</li><li><img src="'+imgs+'" /></li><li>' +price+ '</li></ul>';}}) }); $("#newbox").html(listdata); $.cookie("name",$("#newbox").html()); } }); }) }); </script> </head> <body> <div id="buttons"> <button>600</button><button>700</button><button>800</button><button>900</button> </div> <div id="newbox"></div> </body> --xml-------- <list> <name>いちご</name> <imgs>001.jpg</imgs> <price>600</price> </list> <list> <name>ぶどう</name> <imgs>002.jpg</imgs> <price>700</price> </list> <list> <name>スイカ</name> <imgs>003.jpg</imgs> <price>800</price> </list> <list> <name>メロン</name> <imgs>004.jpg</imgs> <price>900</price> </list> <list> <name>りんご</name> <imgs>005.jpg</imgs> <price>600</price> </list> 　　　　・・・続く -------------- この状態だと、内容が少ない場合は表示されるのですが、内容が多くなると表示されなくなります。 基本的なことが間違っているのか、cookieの処理がおかしいのか 理由がわからず困っています。 どうかご教授お願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する