jQueryで要素を取得して利用する方法とは？
- jQueryを使用して要素を取得し、後でその要素を利用する方法について知りたい。
- jQueryを使ってグローバル変数に要素を代入し、後でその変数を利用したい。
- 要素を代入したグローバル変数を利用して、alertEx関数でクリックしたinputの値を表示したい。
- ベストアンサー
jQueryで要素を取得した後の使い方について
jQueryでグローバル変数に要素を代入した後にその変数を利用したいのですが記述方法がわかりません。 var element; // クリックしたinputの要素をelementに代入 $(function(){ $("input").click(function(){ element = $(this); }); }); // elementを利用する function alertEx(){ alert($(element).val()); } alertEx関数を実行するとクリックしたinputの値を表示するようにしたいです。 alertEx関数でのelementの使い方が間違っていると思うのですが、どのように記述すればinputの値をalert表示できるのでしょうか？ 知りたいのは、あくまでも要素をelementに代入した後の利用の仕方です。 表示方法とかではないです（上記コードは例です）。 どうぞよろしくお願い致します。
- suffre
- お礼率76% (2013/2633)
- JavaScript
- 回答数3
- ありがとう数12
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
> element.click(function(){ > ～ > } > > ↑これはエラーが出てしまいました。 ん～、ぬるぽだったんじゃないか？ 一度elementが設定されたらそんな事はないはずだけど。例えば、<head>内に以下のように書いたとしよう。 var element; // クリックしたinputの要素をelementに代入 $(function(){ $("input").click(function(){ element = $(this); }); }); // elementを利用する function alertEx(){ alert($(element).val()); } element.click(function(){ // ・・・(1) alert("hoge"); }); これは明らかにミスだ。なぜならば、(1)の時点ではelementはnullだからだ。だがしかし、 var element; // クリックしたinputの要素をelementに代入 $(function(){ $("input").click(function(){ element = $(this); }); }); // elementを利用する function alertEx(){ element.click(function(){ // ・・・(2) alert("hoge"); }); } これは即座にはエラーにならない。このページがロードされた後、一度もinputタグをクリックせずにalertEx()を呼び出して(2)に到達した時だけエラーになる。IE10、jquery 1.8.3で確認。これもエラーにならないようにするには function alertEx(){ element && element.click(function(){ alert("hoge"); }); } などとnullチェックを追加すれば良い。ところが、これだとalertEx()が呼び出された時にelementに入っているinputにどんどんどんどんイベントハンドラが追加されていってしまう。画面をロードしてinputをクリック→alertEx()を3回呼び出す→inputをクリックするとhogeが3回アラートされるようになる。これはフラグを持つなりで自分で対処しないといけない。 「エラーが出る」というのは具体的に書いた方がいいだろう。そのコードを書いた後、どのブラウザで、どうした時に、何というエラーメッセージが表示されるのか。
その他の回答 (2)
- tracer
- ベストアンサー率41% (255/621)
既にNo.1さんが回答されていますが、clickが有効にならない件について、横から失礼します。 有効にならない理由はNo.2さんが述べられていますので、その解決策として違うアプローチを書いてみます。 単純に言うと、inputをclickしないとelementに要素が入らないわけなので、element.clickの宣言がinputのclick後であれば問題はないわけです。 従って、以下のように関数を使わずにinput click内に直接clickイベントを書くか、 $("input").on("click",function(){ element = $(this); element.on("click,function(){ alert(element.val()); }); }); clickイベントを外部関数に持ち出したいのであれば、elementを引数にして渡せばよいです。 $("input").on("click",function(){ element = $(this); clickEv(element); }); function clickEv(element){ element.on("click",function(){ alert(element.val()); }); } ただ、例の場合、elementの対象がinput、つまり、初回にクリックする要素と同じなので、本当に例の通りの実装ならば無意味な記述ですね。
- anmochi
- ベストアンサー率65% (1332/2045)
// elementを利用する function alertEx(){ alert($(element).val()); } ↓ // elementを利用する function alertEx(){ alert(element.val()); } こうだな。なぜかと言うとelementには既に（input要素ではなく）jQueryオブジェクトが入っているから。もちろんelementがnullじゃないチェックとかは要るぜ。
関連する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()」を使う方法はありますでしょうか？あるのなら具体的に教えてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jQueryで指定された要素のIDに触れた時イベントを起こしたいのです
jQueryで指定された要素のIDに触れた時イベントを起こしたいのですがうまくいかずに困っています。 jQuery(document).ready(function($) { var msg = ""; $("#Div11").mouseover(function() { msg = "おはよ" alert(msg); }); $("#Div2").mouseover(function() { msg = "こんにちは" alert(msg); }); $("#Div3").mouseover(function() { msg = "うっすー" alert(msg); }); $("#Div4").mouseover(function() { msg = "お疲れ様でした" alert(msg); }); $("#Div5").mouseover(function() { msg = "こんばんは" alert(msg); }); }); このような記述をしているのですがIDに触れた時、値を代入してメッセージを表示させたいのですが出来ません。 どなたかご教示願います！
- ベストアンサー
- JavaScript
- jQueryでクリックされた要素のidを関数で取得
以下のようなソースで、クリックされた要素のidをアラートで出したいとき、class: alphabetのa要素ををクリックすると、undefinedと出ます。 関数でthisを使うと呼び出し元のことを指さないので、クリックされた要素のidは出ないということなのですが、こういった場合、クリックされた要素のidを取得して、表示したい場合はどのようにすればよいか教えてください。 [htmlソース] <a class='alphabet' id='a' href='' onclick="return false;">A</a> <a class='alphabet' id='b' href='' onclick="return false;">B</a> <a class='alphabet' id='c' href='' onclick="return false;">C</a> <script src="jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('.alphabet').click(function(){ function alertAlphabet(){ alert($(this).attr('id')); }; alertAlphabet(); }); }); </script>
- ベストアンサー
- JavaScript
- jqueryでRSS内のdc:dateなどの要素の取得方法
jqueryを使用してRSSのdc:dateやdc:subjectなどの要素を取得するにはどうしたらよいでしょうか。 現在以下のようなコードにしていまして、なんとなく取得したRSSの最初に書いてあるxmlns:dc="http://purl.org/dc/elements/1.1/" となってる部分を利用すればいいのかなと思い立ち、children関数などを使ってみましたが取得できませんでした。 $.ajax({ url: settings.xmllocation, async: true, cache: false, dataType: "xml", success: function(xml) { $(xml).find('item').each(function() { var title = $(this).find('title').text(); var url = $(this).find('link').text(); var date = $(this).children('http://purl.org/dc/elements/1.1/').find('dc:date').text(); var element = $('<div><a href="' + url + '">' + title + '('+date+')</a></div>'); $(container).append(element); elements.push(element); }); });
- ベストアンサー
- JavaScript
- jQueryのfocus,blurが機能しません。
初めまして。jquery初心者です。宜しくお願いします。 フォームの入力項目に『検索したい言葉を入力してください』だとか、『お名前を入力してください』というテキストが薄い色で入っていて、テキスト内をクリックして入力状態になると、中のテキストが消えるというしくみをjQueryでやっているのですが、上手く行きません。 <HTML> <form name="form1" method="post" action="https://www.rescue.ne.jp/form/mail.cgi"> <p> <label for="namae">お名前</label> <input class="guideText" type="text" name="namae" id="namae" value="お名前を入力してください。"> </p> <p> <label for="email">メールアドレス</label> <input class="guideText" type="text" name="email" id="email" value="メールアドレスを入力してください。"> </p> <p> <label for="comment">お問い合わせ内容</label> <textarea class="guidetext" name="comment" id="comment">メッセージを入力してください。</textarea> </p> <p> <input type="submit" name="button" id="button" value="お問い合わせ送信"> </p> </form> 一番上の『お名前を入力してください。』の部分だけ機能しますが、文字の色が 最初サイトを開くと黒になり、テキストをクリックすると文字が消え、フォーカスを外すと薄いグレーになります。これを、最初から薄いグレーで表示させたいのと、『メールアドレス』『お問い合わせ内容』も同じようにfocus,blurを適用させたいです。 // JavaScript Document $(function(){ $('.guideText').each(function(){ var guideText = this.defaultValue; var element = $(this); element.focus(function(){ if(element.val()===guideText){ element.val(''); element.removeClass('guide'); } }); element.blur(function(){ if(element.val()===''){ element.val(guideText); element.addClass('guide') } }); if(element.val()===guidetext){ element.addClass('guide'); } }); }); <HTML>では、class="guidetext"とすべて適用させてるのに上手く機能しません。 自分では限界なので相談させていただきました。 どうか、宜しくお願い致します。
- ベストアンサー
- その他（プログラミング・開発）
- jQuery の one 関数について
jQuery の one 関数は便利だと思い、是非作ってみようと思いましたが、全然出来ません＞＜ 一応以下のように作ってありますが、正しく動作しない上に、name を指定して、 Listener.data オブジェクトにname で保存をするようになっていて、同じnameを渡したら上書きされてしまいます。 どうしたら、jQueryのような、one関数を作れるでしょうか？；； var Listener={ addEvent:function(element,type,callback,useCapture){ if(element.addEventListener){ return element.addEventListener(type,callback,useCapture); } else if(element.attachEvent){ return element.attachEvent('on'+type,callback); } else{ return element['on'+type]=callback; } }, removeEvent:function(element,type,callback,useCapture){ if(element.removeEventListener){ element.removeEventListener(type,callback,useCapture); } else if(element.detachEvent){ element.detachEvent('on'+type,callback); } else{ return false; } return true; }, addOne:function(name,element,type,callback,useCapture){ Listener.addEvent(element,type,callback,useCapture); Listener.addEvent(element,type,function(){ Listener.removeEvent(element,type,); },useCapture); this.data[name]=new Function("Listener.removeEvent("+element+",'"+type+"',Listener.data['"+name+"'],"+useCapture+");+callback); this.addEvent(element,type,this.data[name],useCapture); }, data:{ } }; addEventとremoveEventは正常動作しています。 現在は、 Listener.addOne('name'/*指定しなくてもいいようにしたい*/,'document'/*オブジェクトを渡すと、elementがobjectになり、未定義エラーに*/,function(){alert('OK');},true); となっていますが、目指すは以下のような書き方です。 //仮関数定義 function test(str){ alert(str); } var str='test'; Listener.addOne(document,function(str){test(str);},true); です。 一応、jQueryのone関数を見てみましたが、jQueryは使ったことが無く、あまり分かりませんでした；； 御回答宜しくお願いしますm(_ _)m
- ベストアンサー
- JavaScript
- jQueryの関数から変数を取得
次のうち変数valを取得してこれとは別の関数で利用したいのですが、どうやればこの変数を取得出来るのでしょうか？ 単純な関数だと関数名を付けて戻り値にvalを指定してそれを呼び出してあげれば良いと思うのですが、この場合はどうしたら良いのか分からず頭を悩ませています。 var timer = false; var replaceWidth = 320; var prefWidth = parseInt( $( window ).width() ); $( window ).resize( function () { if( timer !== false ) { clearTimeout( timer ); } timer = setTimeout( function () { var self = $( this ); var windowWidth = parseInt( $( window ).width() ); if( windowWidth <= replaceWidth && replaceWidth < prefWidth ) { var val = 1; } else if( replaceWidth < windowWidth && prefWidth <= replaceWidth ) { var val = 10; } prefWidth = windowWidth; }, 200 ); });
- ベストアンサー
- JavaScript
- jQueryを利用する場合の、グローバル変数の範囲について。
jQueryを利用する場合の、グローバル変数の範囲について。 jQueryを利用してファイルからデータを呼び出して、URL上は画面遷移することなく、 件数に応じて内容を表示するサンプルがあります。 そのスクリプトの中で、スクロール位置をグローバル変数に入れて、別の場所でも使いたいと考えているのですが、うまく変数の値を保持できません。どこがマズいのでしょうか？ function test(){ $(":checkbox, :radio").click(function(){ var h = $(window); hoge = h.scrollTop(); window.alert(hoge); }); window.alert(hoge); } 一つ目のalertだけだと、スクロール位置が正しく表示されるのですが、 二つ目のalertを付けると、hoge is not defined となります。 jQueryを使っているからなのでしょうか、それとも、単にグローバル変数の使い方を間違っているからなのでしょうか。
- ベストアンサー
- JavaScript
- 【jQuery】 changeが検出できない
間違いがあったため、投稿しなおしです。 MySQL + PHP + javascript with jQuery でプログラムを作成しています。 $.ajaxでPHPを呼び出し、以下のようなinputを書き出しました。 <input id="hoge" onchange="alert('hogehoge')" type="hidden" value="foo" / > その後、以下のようにjsで値の変更を行いましたが、changeイベントが検出できません。 $("#hoge").val("hogehoge");//アラートが出ない 変更後、すぐにアラートが出るようなイメージでいたのですが、アラート自体が出ません・・・ inputに直にonchangeを書いているのがマズイのかな、と思い、以下のように変更もしてみましたが、やはりダメでした。 $("#hoge").livequery("change",function(){ alert("hogehoge"); }); $("#hoge").val("hogehoge");//やはりアラートが出ない プログラムから変更されたval()は、イベントとして取得できないのでしょうか。 なぜ取得できないのか、またそもそも出来ないのなら何か方法はないか、ご存じの方お願い致します。
- ベストアンサー
- JavaScript
- jQueryで合計を出したい
<table> <tr> <td class="point"><input type="text"></td> <td class="point"><input type="text"></td> <td class="point"><input type="text"></td> <td class="point"><input type="text"></td> </tr> </table> とHTMLで記述していて、jQueryを下記のように記述しました。 var total; j$(".point:text").change(function(){ j$(".point:text").each(function(){ var point = j$(this).val(); total = parseInt(point)+total; }); alert(total); }); alertで返ってくる結果が「NaN」となります。 どのようにすれば合計値が求められるでしょうか。 やりたいことは「pointクラス」内のテキストフォームの値を合計したいです。
- ベストアンサー
- JavaScript
お礼
ありがとうございます！ ちなみに、 element.click(function(){ ～ } ↑これはエラーが出てしまいました。 $('input').click(function(){ ～ } はできるのに、なぜ$('input')をelementに置き換えるとエラーになるのでしょうか？ 度々すみません・・・。