jQueryが反映されない！削除ボタンが表示されず、ToDoリストがおかしな位置に…どうする？| OKWAVE

JavaScriptについて

以下のコードはテキストボックスに文字を書き込み追加ボタンを押すとボタンのしたに書き込んだ内容が追加されるというものですなぜか追加ボタンを押しても反応がありませんなぜでしょうか？ <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="components/loader.css"> <script src="components/loader.js"></script> </head> <body> <h1>ToDoメモ</h1>  <div id = "new_div"> <input id = "new_txt" type = "text" value = "" style = "width:250px" size = "40"/> <br /><input id = "add_btn" type = "button" value="追加" /> </div>  <div id = "items_div"></div>  <div id = "control_div"> <input id = "done_btn" type = "button" value = "削除"> </div> <script> function $(id) { return document.getElementById(id); } //変数の初期化 var todo_div = $(todo_div); var db; var cbItems = []; //ドキュメント読み込み時のイベント設定 window.onload = function() { if (window.openDatabase == undefined) { alert("Web Databaseに対応していません"); return } //データベースを開く db = window.openDatabase("todo.db", "1.0", "ToDo", 1024 * 1024); db.transaction(function(tr) { //テーブルがなければ作る var query = "CREATE TABLE IF NOT EXISTS todo_tbl(" + " todo_id INTEGER PRIMARY KEY, " + " memo TEXT NOT NULL " + ")"; tr.executeSql(query, [], loadItems); }); }; // アイテムの読み込み実行 function loadItems() { db.transaction(function(tr) { var query = "SELECT * FROM todo_tbl" ; 　　tr.executeSql(query, [] ,loadItems_onResult); }); } //アイテムが読み込まれたときのイベント function loadItems_onResult(tr, rs) { //すべての子ノードを削除 while(items_div.hasChildNodes()){ items_div.removeChild(items_div.lastChild); } cbItems = []; //チェックボックスの作成 for (var i = 0; i < rs.rows.length; i++) { var row = rs.rows.item(i); var todo_id = row.todo_id; var memo = row.memo; //チェックボックスの追加 var cb = document.createElement("input");//チェックを作成 cb.type = "checkbox"; cb.value = todo_id; cbItems.push(cb); var label = document.createElement("span");//ラベル作成 label.innerHTML = memo; var line = document.createElement("div");//一行作成 line.appendChild(cb); //チェックを追加 line.appendChild(label); //ラベルを追加 items_div.appendChild(line); //項目にlineを追加 } } //追加ボタンを押したときのイベント $("add_btn").onclick = function() { var text = $("new_txt").value; $("new_txt").value = ""; db.transaction(function(tr) { var query = "INSERT INTO todo_tbl(memo)VALUES(?)"; tr.executeSql(query,[text],loadItems); }); }; //削除を押した時のイベント $("done_btn").onclick = function() { db.transaction(function(tr) { for (var i in cbItems) { var cb = cbItems[i]; if(!cb.checked) continue; var query = "DELETE FROM todo_tbl WHERE todo_id=?"; tr.executeSql(query,[cb.value]); } },function(){ alert('削除失敗') },loadItems); }; </script> </body> </html>

JavaScriptでのcheckbox作成

JavaScriptのcheckbox作成について教えてください突然のリクエスト申し訳ございませんお時間があればご回答お願いします ToDoメモを作っておりまして、仕様としては input type="text"に文字を書き込んで追加ボタンを押せばtextboxの下に書き込まれた内容がリストのような形で表示されますそのリストの横にチェックボックスをつけてチェックして削除ボタンを押すと削除できるという仕組みですですがチェックボックスのサイズが小さいですどうすればサイズを大きくできるのでしょうか？ JavaScriptでcheckboxを作成するコードは下記の通りです <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,maximum-scale=3.0"> <script src="plugins/plugin-loader.js"></script> <link rel="stylesheet" href="plugins/plugin-loader.css"> <script> // Set virtual screen width size to 320 pixels monaca.viewport({width: 320}); // // TODO: Please edit your JavaScript code here // </script> <style> h1 { color : #4795F4; } </style> </head> <body background="img/st18.png"> <center><h1>ToDoメモ</h1> <a href="index.html"><img src="img/blhome.gif" width="50" height="25"></a> </center>  <center><div id="new_div"> <input id="new_txt" type="text" value="" style="width:270px" size="40"/></center> <br><img src="img/blmenu.gif" width="50" height="25" id="add_btn" /> </div>  <div id="items_div"></div>  <div id="control_div"> <img src="img/blmenu.gif" width="50" height="25" id="done_btn"/> </div>  <script src="gear5-0.3.js"></script> <script> //便利な関数の定義 function $(id) { return document.getElementById(id); } //変数の初期化 var todo_div = $("todo_div"); var db; var cbItems = [] ; //ドキュメント読み込み時のイベントを設定 window.onload = function() { if (window.openDatabase == undefined) { alert("WEB Databaseに対応していません！！") ; return } //データベースを開く db = window.openDatabase("todo.db", "1.0", "ToDo", 1024 * 1024); db.transaction(function(tr) { //テーブルがなければ作る var query = "CREATE TABLE IF NOT EXISTS todo_tbl(" + " todo_id INTEGER PRIMARY KEY, " + " memo TEXT NOT NULL " + ")"; tr.executeSql(query, [], loadItems); }); }; // アイテムの読み込み実行 function loadItems() { db.transaction(function(tr) { var query = "SELECT * FROM todo_tbl" ; 　　tr.executeSql(query, [] ,loadItems_onResult); }); } //アイテムが読み込まれたときのイベント function loadItems_onResult(tr, rs) { //すべての子ノードを削除 while(items_div.hasChildNodes()){ items_div.removeChild(items_div.lastChild); } cbItems = []; //チェックボックスの作成 for (var i = 0; i < rs.rows.length; i++) { var row = rs.rows.item(i); var todo_id = row.todo_id; var memo = row.memo; //チェックボックスの追加 var cb = document.createElement("input");//チェックを作成 cb.type = "checkbox"; cb.value = todo_id; cbItems.push(cb); var label = document.createElement("span");//ラベル作成 label.innerHTML = memo; var line = document.createElement("div");//一行作成 line.appendChild(cb); //チェックを追加 line.appendChild(label); //ラベルを追加 items_div.appendChild(line); //項目にlineを追加 } } //追加ボタンを押したときのイベント $("add_btn").onclick = function() { var text = $("new_txt").value; $("new_txt").value = ""; db.transaction(function(tr) { var query = "INSERT INTO todo_tbl(memo)VALUES(?)"; tr.executeSql(query,[text],loadItems); }); }; //削除を押した時のイベント $("done_btn").onclick = function() { db.transaction(function(tr) { for (var i in cbItems) { var cb = cbItems[i]; if(!cb.checked) continue; var query = "DELETE FROM todo_tbl WHERE todo_id=?"; tr.executeSql(query,[cb.value]); } },function(){ alert('削除失敗') },loadItems); }; </script> </body> </html>

jQueryでデータを受け渡しで動作が・・・。

jQueryでデータを受け渡しで動作がどうしてもうまくいきません。 <li>タグにjsonデータを呼び出して表示しています。それで別の処理のデータを加えるとどうしても最大６行表示の方が機能しなくなってしまいどうしたらうごくのでしょうか？普通においただけではダメなのでしょうか？ <script type="text/javascript"> jQuery(function(){ $.getJSON("./json_sql.php",function(data){ $.each(data,function(i,items){ $("<li/>",{ text : items.category+'　'+ items.date+'　'+items.content, 'class' : items.category, }).appendTo('ul','#portfolio'); }); }); }); $(document).ready(function() { var max = 6 /* 最大表示数 */ var mx = ':lt(' + max + ')', pf = $('#portfolio li'); pf.filter(':not(' + mx + ')').hide(); $('#navi a').click(function(){ var filterVal = '.' + $(this).text().toLowerCase().replace(' ', '-'); if(filterVal=='.all') filterVal = '*'; pf.filter(':visible').fadeOut('fast', function(){ pf.filter(filterVal + mx).fadeIn('slow'); }); }); }); </script> <div id="main"> <ul id="navi" class="tab"> <li class="all"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#e2260d';">ALL</a></li> <li class="topix"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#0f639f';">topix</a></li> <li class="cleaning"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#0e99b0';">cleaning</a></li> <li class="insurance"><a href="#" onclick="document.getElementById('samplebox').style.backgroundColor = '#0ea653';">insurance</a></li> </ul> <div id="samplebox"></div> <div class="content"> <ul id="portfolio"></ul> </div>  </div>

1ページ内で複数のwindow.onload = functionの動作

Ajaxを使用して取得してきたRSSをinnerHTMLで表示するスクリプトを1ページ内に複数設置したいのですが、うまくいきません。 prototype.jsを使うと複数のonloadを制御できるという記事を参考にしたのですが、動作しませんでした。（WindowsIE6で検証してます） http://hori-uchi.com/archives/2005_09.html BODY以下のソースはこちらです。現状だとどちらか一つだけなら動作する感じです。これをどちらも動作する方法をご教授いただけませんでしょうか。宜しくお願いします。 //RSS取得1箇所目 <div id="p1">roading1</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://###"; } var xml = {}; xml.onload = function(data){ var items1 = data.items; var g = "\n"; for(var i = 0; i < Math.min(items1.length, 20); i++){ // } document.getElementById("p1").innerHTML = g; } </script> //RSS取得2箇所目 <div id="p2">roading2</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://***"; } var xml = {}; xml.onload = function(data){ var items2 = data.Result; var h = "\n"; for(var i = 0; i < Math.min(items2.length, 20); i++){ // } document.getElementById("p2").innerHTML = h; } </script>

jQuery - bind('click', x)

<!DOCTYPE html> <script src="jquery-1.7.1.js"></script> <style> .menu_items { display: none; } </style> <script> $(function() { $('.dropdown').each(function () { var menu = $(this).parent().children('.menu_items'); var hideFunc = function() { menu.slideUp(120); $(document).unbind('click', hideFunc); }; $(this).click(function() { menu.slideDown(120); $(document).bind('click', hideFunc); }); }); }); </script> <div> <button class="dropdown">Currency</button> <ul class="menu_items"> <li><button>USD</button> <li><button>EUR</button> <li><button>GBP</button> </ul> </div> -- jquery でメニューに表示・非表示をしたいと思ってます。 click したあとに、メニューを消す命令を bind してるってのに、この hideFunc （メニューを消す命令）がすぐ呼ばれてしまいます。適当な配列をフラグに使って二回目呼ばれたときには消す、みたいな解決策を思い来ましたが、いまいちスマートな感じがしません。ちゃんとクリックが終わったあとに hideFunc をバインドしたいのですが、それはなにかいい書き方あれば教えてください

WebDatabaseのlistから選択項目表示

HTML5 Web Database でlistから選択した項目を詳細表示したい。詳細一覧detail_b()押下した際、listで選ばれているレコード内容を表示したい。色々試しているのですが・・・どこがおかしいかわかりません。 function load() で list.options[list.options.length] = new Option(row.val2, row.val, row.key1); 項目表示した場合、 function detail_b() でどのようなSELECT文を書けば listで選択された行を指定できるのですか？ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> var db = openDatabase("my_sample3", "", "Sample for my3", 1024*1024); db.transaction(function(tx) { tx.executeSql("create table if not exists storage (key1, val, val2)"); }); function load() { db.transaction(function(tx) { tx.executeSql("select * from storage", [], function(tx, rs) { var list = document.getElementById("list"); list.innerHTML = ""; var rows = rs.rows; for (var i = 0, n = rows.length; i < n; i++) { var row = rows.item(i); list.options[list.options.length] = new Option(row.val2, row.val, row.key1); } }); }); } function detail_b() { var list = document.getElementById("list"); if (list.selectedIndex < 0) { return; } var selected = list.options[list.selectedIndex].value; db.transaction(function(tx) { tx.executeSql("select * from storage where key1 = ?", [selected], function(tx, rs) { var rows = rs.rows; var row = rows.item(0); detail.innerHTML = ""; detail.options[detail.options.length] = new Option(row.val2, row.val, row.key1); }); }); } function remove() { 省略 } function add() { 省略 } </script> </head> <body onload="load()"> <h1></h1> <table border="0"> <tbody> <tr> <td colspan="2"><select id="list" size="5" style="width: 200px"></select></td> <td><button onclick="detail_b()">詳細一覧</button><BR><button onclick="remove()">削除</button></td> <td rowspan="4"><select id="detail" size="5" style="width: 400px"></select></td> </tr> <tr> <td><font face="Times New Roman">キー:</font></td> <td><input type="text" id="key1"></td> <td></td> </tr> <tr> <td><font face="Times New Roman">値:</font></td> <td><input type="text" id="value"></td> <td></td> <td></td> </tr> <tr> <td><font face="Times New Roman">値２:</font></td> <td><input type="text" id="value2"></td> <td><button onclick="add()">追加</button></td> </tr> </tbody> </table> </body> </htm>

jQueryを利用してのランダム表示について

jQueryを学習しています。学習し始めてから1ヵ月程度になります。途中まで考えたのですが、次にどうしたらいいか検討がつきません。基本的なこともあまりわかっていない状況での質問で申し訳ありません。どなたかご教授のほどお願いいたします。考えていることは以下になります。・Nextのボタンを押すとランダムでclass=boxの内容を１つ表示したい・再度、Nextのボタンを押すと表示されていたものが消えて、別のclass=boxを表示したい ////////////////　スクリプト　//////////////// <script type="text/javascript"> var a = ".box" $(function(){ $(a).hide(); }); $(function(){ $("#tugi").click( function(){ var items = $(a).get().sort(function() { return Math.round(Math.random()) ; }).slice(0, 1); $(items).show(); }); }); $(function(){ $(".answer").hide(); }); $(function(){ $(".kirikae").click( function(){ $(this).next().toggle(); }); }); </script> ////////////////　HTML　//////////////// <body> <div id="wrap"> <input type="button" value="Next"id="tugi"/> <div id="1" class="box"> 問題1 <br /> <input type="button"value="答えの表示" class="kirikae"/> <div class="answer"> 答え1 </div> </div> <div id="2" class="box"> 問題2<br /> <input type="button"value="答えの表示" class="kirikae"/> <div class="answer"> 答え2 </div> </div> <div id="3" class="box"> 問題3<br /> <input type="button"value="答えの表示" class="kirikae"/> <div class="answer"> 答え3 </div> </div> <div id="4" class="box"> 問題4<br /> <input type="button"value="答えの表示" class="kirikae"/> <div class="answer"> 答え4 </div> </div> </div> </body>

JQuery インプット要素カウント減算について

お世話になります。 JQueryを使用してインプット要素を追加・削除できるようにするアプリケーションを作成してます。問題は、インプット要素の数を追加した合計数量を取得し削除をした場合、うまくいかない事です。下記はコードです。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../library/js/jquery-1.6.js"></script> <link rel="stylesheet" href="../library/css/defult.css"> <link rel="stylesheet" href="../library/css/style.css"> <title>メールアドレス登録</title> <script type="text/javascript">  </script> </head> <body> <div id="content"> <h1>メールアドレス登録</h1> <form id="multi"> <table> <tbody class="row"> <tr> <td><input type="text" style="width: 320px;" name="emailAddress_1" /></td> <td><a href="#" id="addScnt">Add</a></td> </tr> </tbody> </table> <input type="hidden" name="cnt" id="cnt" /> <div id="process"> <input type="submit" class="processing" name="submit" value="次へ"/> </div> </form> </div> </body> </html>

引数を持つコールバック関数をonloadで複数実行

下記のような内容で、指定したidを持つ要素に新しい内容を追加したいのですが、この内容だとcontent2のidを持つdiv要素にしか内容が追加されません。そこで、対象となるidを持つ要素をいくつ追加しても反映されるようにしたいのですが、これを実現するにはどうしたら良いでしょうか？アドバイス等、何かしらお力添えを頂ければ幸いです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Title</title> <script type="text/javascript"> // </body>直前には置きたくない // 指定したidを持つ要素に新たな内容を追加する関数 function ins( id ) { var output = document.createElement( 'span' ); output.innerHTML = '<p>content</p>'; // 追加する内容はhtmlやjavascriptなど必要に応じて変化する var element = document.getElementById( id ); element.appendChild( output ); } window.onload = function() { ins( 'content1' ); } window.onload = function() { ins( 'content2' ); } </script> </head> <body> <div id="content1"></div>  <div id="content2"></div>  </body> </html>

よろしくお願い致します。

よろしくお願い致します。サイトのソースを整理しているなかで、何かの解析用のものと思われる不明な記述を見つけました。お分かりになる方がいらっしゃいましたら教えて下さい。 <div class="moz-text-flowed" style="font-family: -moz-fixed"><script language="Javascript" type="text/javascript">  </script></div> お手数ですがよろしくお願い致します。

javascriptについて教えてください。

divのボタンを作りたいと思い、調べながらjQueryを使う方法は以下のようにしたらいい事は分かったのですが、jQueryを使わずにしようと思い $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); の部分を document.getElementsByTagName("div").onclick = function(){ var x = this.id; 　alert(x); }; としてみたのですが、うまくいきません。jQueryを使わずに同じようなボタンを作るにはどうしたらいいのでしょうか？ <!doctype html> <html> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> <script type="text/javascript" language="javascript"> $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); </script> </head> <body> <div id="aaa" class="div_link">a</div> <div id="bbb" class="div_link">b</div> <div id="ccc" class="div_link">c</div> <div id="ddd" class="div_link">d</div> <div id="eee" class="div_link">e</div> </body> </html>

jQueryで追加した要素がマウスホバーに反応しない

jQueryを使って、ボタンを押すと要素を追加しています。後から追加された要素はマウスホバーなどが有効にならないのですが、対象方法などあるでしょうか。下記のようなソースで質問の状態になります。よろしくお願いします。 <html> <head> <title>test</title> <script type="text/javascript" src="system/jquery-1.3.2.min.js"></script> <script type="text/javascript">  </script> </head> <body> <div><INPUT class="insert" type="button" value=INSERT></DIV> <div id="sortable" style="width:200px;"> <div class="edit"> <p>text1</p> </div> <div class="edit"> <p>text2</p> </div> <div class="edit"> <p>text3</p> </div> </div> </body> </html>

jQueryでHTML表示の部分

jQueryで表示されるデータをHTMLで表示するのですが、色々いじっていたのですが、表示されなかったり<li>タグだけしかひょうじされなかったりして、いまいちわからなくて、質問を致しました。 -現在の表示------------ <li>No：1　Title：タイトル</li> ----------------------- <li>タグの中にclassを追加したいのですが、どうすれば、<li>タグにclassが追加されるのでしょうか。 ----------------------------------- <li class="test">No：1　Title：タイトル</li> ----------------------------------- こんな感じに表示させたいのです。大変申し訳ございませんが、よろしくお願い致します。 <script type="text/javascript"> jQuery(function(){ $.getJSON("./json_sql.php",function(data){ $('p','#demo').remove(); $('#demo').append('<ul/>'); $.each(data,function(i,items){ $("<li/>",{ text:'No：'+items.no+'　Title：'+items.title }).appendTo('ul','#demo'); }); }); }); </script> <div id="demo"> <h4>リスト</h4> </div>

【javascript　文法】値渡し？参照渡し？

以下実行すると、AAAをクリックしてもBBBをクリックしても「BBB」とアラートされます。 <html> <head> <script type="text/javascript" src="prototype.js"></script> </head> <body> <script type="text/javascript"></script> </body> </html> javascriptって値渡しだと思っていたので、期待した動作と異なります。参照渡しだと考えると納得できるのですが、javascriptって参照渡し？それとも値渡し？　と混乱しています。この辺のところを、教えてください。お願いいたします。

要素を指定の場所に追加

お世話になります。 createElementした要素を指定の場所に追加したいのですがどのようにすればよろしいでしょうか？ <HTML> <HEAD> <script type="text/javascript"> function add(id){ var dummy = document.createElement ("SPAN"); var str = document.createTextNode("ダミー"); dummy.appendChild(str); document.getElementById(id).appendChild ( dummy ); } </script> </HEAD> <BODY> <div id="top"> <div id="id_1">ほげ１</div> <div id="id_2">ほげ２</div> </div> <br><br> <input type="button" value=copy onClick="add('id_1')"> </BODY> </HTML> ・appendChild前 <div id="id_1">ほげ１</div> <div id="id_2">ほげ２</div> ・実現したい形 appendChild後(id_1の後に追加する。) <div id="id_1">ほげ１</div> <span>ダミー</span> <div id="id_2">ほげ２</div> ・現状(id_1のdivの中に追加される。) <div id="id_1">ほげ１ <span>ダミー</span></div> <div id="id_2">ほげ２</div> もしかしたらすごく簡単なことなのかもしれませんが、ご教授よろしくお願いいたします。

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> ********************************************************** どこがいけないのかご指導いただけませんでしょうか? 宜しくお願い致します。

html5+jqueryでリンクが反映されない

html5+css3でスマートフォン向けサイトをコーディングしています。タブナビゲーションを作りたくて、ちょうど良いサンプルを見つけて使わせていただきました。 http://designdrill.jp/wordpress/?p=5082 表示は思った通りに出来たのですが、テキスト部分にリンクを付けてもソース上では <div id="txt_1"><a href="http://www.google.co.jp/">googleの説明文</a></div> このように問題無く表記されているのですが、クリックしても何も反応しません。動作確認はPCでしています。ソースは以下の通りです。 ※オリジナルの方はjquery-1.7.min.jsでしたが、1.8.2使用です。 html部分------------------- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#textArea>div").hide(); var select_id = 1; $("#btn_" + select_id).addClass("selected"); $("#txt_" + select_id).show(); $('#tab').on("click touchstart", "li:not(.selected)",function() { var click_id = this.id.split("_")[1]; var myColor = $("#btn_" + click_id).css("background-color"); $("#textArea").css("background-color", myColor); //alert(myColor) $("#btn_" + select_id).removeClass("selected"); $("#txt_" + select_id).hide(); $("#btn_" + click_id).addClass("selected"); $("#txt_" + click_id).show(); select_id = click_id; }) }) </script> </head> <body> <section id="tab"> <ul> <li id="btn_1" class="yellow">google</li> <li id="btn_2" class="pink">yahoo</li> <li id="btn_3" class="blue">apple</li> </ul> <div id="textArea"> <div id="txt_1"><a href="http://www.google.co.jp/">googleの説明文</a></div> <div id="txt_2">yahooの説明文</div> <div id="txt_3">appleの説明文</div> </div> </section> css部分------------------- #tab { -webkit-tap-highlight-color: rgba(0,0,0,0); /* デフォルトのタップハイライトを停止 */ } #tab ul { margin: 10px; } #tab ul li { float: left; padding:5px 15px 5px 15px; border-top: 1px #ddd solid; border-left: 1px #ddd solid; border-right: 1px #ddd solid; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; color: #999; height:15px; line-height:15px; margin: 5px 0px 0px 5px; } #tab ul li.selected { color: #000; height:20px; line-height:20px; margin: 0px 0px 0px 5px; } #textArea{ position:relative; top:-1px; z-index:-1; clear:left; background-color:#ffd; margin:0px 10px 10px 10px; padding:10px; height:100px; border: 1px #ddd solid; -webkit-border-radius: 5px; } .yellow{ background-color:#ffd; } .pink{ background-color:#fdf; } .blue{ background-color:#dff; } 見た目とタブをクリックして同一ページ内で遷移する動きは希望通りですが、リンクが反映されない点だけが難点です。（テキスト内のリンクは内容上必須です）今現在、完全に煮詰まっていますのでヒントだけでもいただけたらと思い投稿しました。よろしくお願い致します。

jQueryについて

jQueryのクロスフェードとlightboxを同一ページに設定しています。よく分かっていないのに、コピペで作っていますが、クロスフェードをするとlightboxが動作しません。設定をどう変更したら出来るようになりますか？どなたか助けてください。 <link rel="stylesheet" type="text/css" href="cssjs/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="cssjs/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="cssjs/jquery.lightbox-0.5.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="cssjs/target.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#rightimg'; var fadeSpeed = 1500; var switchDelay = 5000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); </script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <title>あかさたな</title> </head> <body> <div id="outer"> <div id="container"> <div id="header"> <h1>いろはにほへと</h1> </div> <div id="menu"> <ul id="bar"> <li><a href="index.html">HOME</a></li> <li><a href="ka.html">ABC</a></li> <li><a href="history.html">DEF</a></li> <li><a href="kaga.html">GHJ</a></li> <li><a href="admission.html">KLM</a></li> <li id="sen"><a href="link.html">りんく</a></li> </ul> </div> <div class="don"></div> <div id="eyecatch"> <div id="leftimg"></div> <div id="rightimg"> <img src="images/1.jpg" width="300" height="300" alt="" /> <img src="images/2.jpg" width="300" height="300" alt="" /> <img src="images/3.jpg" width="300" height="300" alt="" /> <img src="images/4.jpg" width="300" height="300" alt="" /> </div> </div> <div id="contents"> <h2>最新ニュース</h2> <h3>あかさたな</h3> <div id="gallery"> <ul> <li><a href="top/3.jpg" title="かきくけこ"><img src="top/3s.jpg" width="193" height="272" alt="かきくけこ" /></a></li> <li><a href="top/1.jpg" title="あいうえお"><img src="top/1s.jpg" width="182" height="272" alt="あいうえお" /></a></li> <li><a href="top/2.jpg" title="あいうえお"><img src="top/2s.jpg" width="182" height="272" alt="あいうえお" /></a></li> </ul> </div>

特定のページの画像ＵＲＬ一覧表示をしようと思っているのですが、

特定のページの画像ＵＲＬ一覧表示をしようと思っているのですが、何が原因なのか解らず困っています。 <html> <head> <script> function load(){ var req = new XMLHttpRequest(); req.open("GET", "http://news.google.co.jp/nwshp?hl=ja&tab=wn", false); req.onreadystatechange = function(){ if(4 == req.readyState){ set_news(req.responseXML); } }; req.send(null); } function set_news(xml){ var container = document.getElementById("news"); container.innerHTML = ""; var items = xml.getElementsByTagName("img"); for(var i = 0; i < items.length; i++){ var a = document.createElement("a"); a.href = items[i].getAttribute("src"); a.innerHTML = items[i].getAttribute("src"); container.appendChild(a); } } </script> </head> <body onLoad="load();"> <div id="news"></div> </body> </html> 上記はgoogleの画像ＵＲＬ一覧を取得しようと思っています。この場合、何が悪いのでしょうか？ご教示宜しくお願いいたします。

jqueryについて質問

jQueryが反映されない！削除ボタンが表示されず、ToDoリストがおかしな位置に…どうする？

jQueryが反映されません＞＜

質問者が選んだベストアンサー

お礼 2014/05/15 14:52

補足 2014/05/14 21:08

その他の回答 (1)

補足 2014/05/14 16:18

関連するQ&A

JavaScriptについて

JavaScriptでのcheckbox作成

jQueryでデータを受け渡しで動作が・・・。

1ページ内で複数のwindow.onload = functionの動作

jQuery - bind('click', x)

WebDatabaseのlistから選択項目表示

jQueryを利用してのランダム表示について

JQuery インプット要素カウント減算について

引数を持つコールバック関数をonloadで複数実行

よろしくお願い致します。

javascriptについて教えてください。

jQueryで追加した要素がマウスホバーに反応しない

jQueryでHTML表示の部分

【javascript　文法】値渡し？参照渡し？

要素を指定の場所に追加

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

html5+jqueryでリンクが反映されない

jQueryについて

特定のページの画像ＵＲＬ一覧表示をしようと思っているのですが、

jqueryについて質問

注目のQ&A

カテゴリ

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

専門家に質問してみよう

jQueryが反映されない！削除ボタンが表示されず、ToDoリストがおかしな位置に…どうする？

jQueryが反映されません＞＜

質問者が選んだベストアンサー

お礼 2014/05/15 14:52

補足 2014/05/14 21:08

その他の回答 (1)

補足 2014/05/14 16:18

関連するQ&A

JavaScriptについて

JavaScriptでのcheckbox作成

jQueryでデータを受け渡しで動作が・・・。

1ページ内で複数のwindow.onload = functionの動作

jQuery - bind('click', x)

WebDatabaseのlistから選択項目表示

jQueryを利用してのランダム表示について

JQuery インプット要素 カウント減算について

引数を持つコールバック関数をonloadで複数実行

よろしくお願い致します。

javascriptについて教えてください。

jQueryで追加した要素がマウスホバーに反応しない

jQueryでHTML表示の部分

【javascript 文法】値渡し？参照渡し？

要素を指定の場所に追加

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

html5+jqueryでリンクが反映されない

jQueryについて

特定のページの画像ＵＲＬ一覧表示をしようと思っているのですが、

jqueryについて質問

注目のQ&A

カテゴリ

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

専門家に質問してみよう

JQuery インプット要素カウント減算について

【javascript　文法】値渡し？参照渡し？