• ベストアンサー

[jQuery]イベント定義時のコールバック関数に引数を渡したい

■以下のHTMLが1~5の5個あるとします。 <select id="test_list1"> <option value="1">あいうえお</option> <option value="2">かきくけこ</option> </select> <div id="test_txt1"></div> ■jqueryで以下のように、セレクトボックスを変更したら、それに紐づくdivタグのテキストを書き換えるとします。 var test = 5; for (i=1; i <= test; i++) { $("#test_list"+ i).change( function() { $("#test_txt"+ i ).text('変更されました。'); }); } change()イベント時は、iの値が正常なんですが、 text()で書き換え時は、iの値が常に5になってしまいます。 text()で書き換え時のiは、イベント定義時のiではないということは分かるのですが、 解決の方法がわかりません。 こんなふうに引数として渡すことはできないのでしょうか? $("#test_list"+ i).change( function( i ) { $("#test_txt"+ i ).text('変更されました。'); }); ご教示願います。。

  • karace
  • お礼率57% (134/234)

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

  • ベストアンサー
回答No.1

//23歳の事務系OLです。 ためしてないけど、どうでしょう? さいきんの、おれいの無さに、ぎゃく釣りしてみました。^^; for (i=1; i <= test; i++) {  $("#test_list"+ i).change(   (function(_i){    return function( ) {     $("#test_txt"+ _i ).text('変更されました。');    };   })(i)  ); }

karace
質問者

お礼

うまくいきました!感謝します。 ちなみに、この方法の一般的な名称とかあったら教えてください。 なになに~っていうやり方とか・・。

その他の回答 (3)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.4

命名します。 「一発屋関数の勝負」 (function(arg){   ...=arg; })(xx); 「一発屋関数の使いまわしで勝負」  (function(arg){    return function(){     ...=arg;    };   })(xx);

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.3

99歳の行き倒れです。 #1様の//に釣られてみました。 こんなのでもいけると思う。 for (i=1; i <= test; i++) { $("#test_list"+ i).change( new Function ( '$("#test_txt"+' + i + ').text("変更されました。")') ); } ()内が文字列として扱えるので簡単。ご質問の最後の例示にほぼ近い形になっていると思う。 でも、調子に乗っていっぱい作りまくるとパフォーマンスに影響がでるとか… 参考まで。

回答No.2

せいしきな、なまえは、しらないじょ!? (そんなのは、どうでもいいことさ。とおもっているから)

関連するQ&A

  • jQuery コールバック関数について

    jQueryの勉強をしています。 コールバック関数というところで、下のようなソースがあるのですが、iとoriginalがどうして取得できているのかが分かりません。 <script> $(document).ready(function(){ $("#btn").click(function(){ $("#test").text(function(i,original){ return "旧: " + original + "/新: 文字が変わりました! (index: " + i + ")"; }); }); }); </script> </head> <body> <p id="test">文字が変わります</p> <button id="btn">旧/新 テキスト表示</button> </body> 教えていただけないでしょうか? 宜しくお願いします。

  • jQueryで$関数の使い方。

    これは値が取得できました。 $("#abc").change(function() {   alert(document.getElementById("abc").value); } しかしこれだとうまく行きません。 $("#abc").change(function() {   alert($("#abc").value); } なぜでしょうか? このような場合どう記述するものなのでしょうか? よろしくお願いします。

  • 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に触れた時、値を代入してメッセージを表示させたいのですが出来ません。 どなたかご教示願います!

  • jQueryで設定したイベントハンドラが消える

    jQueryについての質問です。 ちょっと言葉での説明が難しいので、具体的なコードを記載します。 === JavaScript === var clicked = function () { alert(1); }; var jqButton = $("<input type='button' value='test' />"); jqButton.click(clicked); $(function() { $("#showButton").click(function () { $("#test").html(jqButton); }); $("#hideButton").click(function () { $("#test").html(""); }); }); === HTML === <input type="button" id="showButton" value="show" /> <input type="button" id="hideButton" value="hide" /> <div id="test"></div> showボタンをクリックすると、testボタンが表示されます。 hideボタンをクリックすると、testボタンが消えます。 testボタンをクリックすると、alert(1) が実行されます。 という内容なのですが、一度hideしてから再度showして現れたtestボタンをクリックしても、 何も起きません。 仮に、jqButton.click(clicked); の部分を、 jqButton[0].attachEvent("onclick", clicked); などにすると、再表示させたtestボタンも動作します。 これはjQueryのイベントハンドラ設定APIを使った時特有の症状だと思うのですが、 なぜこのような結果になるのでしょうか。 てっきり、$.click()でイベントハンドラを設定すると、 内部でattachEventとかaddEventListnerとかが走るだけだと想像してましたが・・・ また、attachEventなど使わずに、jQueryの機能を使って、 再表示させてtestボタンも動作させるには、どうしたらいいでしょうか。 ご存知の方いましたら、お願い致します。

  • 外部ファイルで定義されているjqueryのユーザ定義関数を、イベントな

    外部ファイルで定義されているjqueryのユーザ定義関数を、イベントなしにphpで呼び出したい お世話になっております phpとjqueryの連携部分で分からないことが出てきたので質問させていただきます jquery側で function funcTest(msg){ alert(msg); } という関数を用意し、php側でイベントなしに呼び出したいのですが、うまくいきません ボタンなどを用意して.click()とかを使えば呼び出せるのですが、そういったイベントなしに(ユーザが特に操作することなく)呼び出せないでしょうか? php側のコードは if($_POST['submit']){ $value = $_POST['submit']; funcTest($value); } のように、、フォームからPOSTで受け取った時にだけ関数を呼び出したいので、1つのページ内で何度も呼び出す必要があり、値を受け取ってから呼び出さなければならないのでクリックイベントなどを利用できない状況です どうぞよろしくお願いいたします

    • ベストアンサー
    • PHP
  • JavaScriptで、SELECTの値で、TEXTを入力可と入力不可

    JavaScriptで、SELECTの値で、TEXTを入力可と入力不可に分けたい。 現在、以下のフォームを作成しています。 <form method="post" action="/" name="formname"> <select name="test[0]" size="1" onchange="selectChange(0)"> <option value="A" selected>A</option> <option value="B" >B</option> <option value="C" >C</option> <option value="D" >D</option> </select> <select name="test[1]" size="1" onchange="selectChange(1)"> <option value="A" selected>A</option> <option value="B" >B</option> <option value="C" >C</option> <option value="D" >D</option> </select> <br> <input name="txt[0]" type="text" value="" size="10"> <br> <input name="txt[1]" type="text" value="" size="10"> </form> このフォームで、例えば、selectのtest[0]でvalueの「C」が選択された場合、 txt[0]が入力できないようにしたいと考えています。 また同様に、test[1]でvalueの「C」が選択された場合は、txt[1]が入力出来ないように したいです。 以下のようなJavaScriptを書きましたが、上手く動きません。 function selectChange(value) { var answer = document.formname.elements["test[value]"].selectedIndex; if(answer == "C") { document.formname.elemens["txt[value]"].disabled = false; } else { document.formname.elemens["txt[value]"].disabled = true; } } どなたか教授頂けましたら、幸いです。 よろしくお願いします。

  • FORMデータを配列としてそうしんしたいのですが・・・

    JavaScriptでセレクトボックス内の値が変化したらもう一つあるセレクトリスト内の値が変更されるように組みました。 以下コード。 ----------------------- <HTML> <head> <script type="text/JavaScript"> <!-- menuItem = [["A","B","C","D","E"],       ["1","2","3"], ["あ","い","う","え","お","か"]]; function setMenuItem(n) { len = document.myForm.works.options.length; for (i=len-1; i>=0; i--) { document.myForm.works.options[i] = null; } for(i=0; i<menuItem[n].length; i++) { document.myForm.works.options[i] = new Option(menuItem[n][i],menuItem[n][i]); } } } //--> </script> </head> <body> <FORM name = "myForm"> <SELECT name="list" onChange="setMenuItem(this.selectedIndex)"> <option value="list1">リスト1 <option value="list2">リスト2 <option value="list3">リスト3 </SELECT> <SELECT name="works[]" MULTIPLE> <OPTION>A <OPTION>B <OPTION>C <OPTION>D <OPTION>E </SELECT> </FORM> </BODY> </HTML> ----------------------- でセレクトリスト内のデータを配列として送信したいのですがうまくいきません。 セレクトリストのnameはworks[]にしたら動作すらしなくなりました。 どなたかご教授願います。

  • selectタグに直接onChangeを書かないイベント取得方法

    javascriptが余り詳しくないので困っています。 <select id="select1" name="select1"> <option value="apple">りんご</option> <option value="banana">バナナ</option> </select> このようなselectの選択リストから値を変更した時にイベントを取得したいのです。 普通に考えると <select id="select1" name="select1" onChange="xxx"> のようにonChangeを使えば簡単なのですが、 困ってしまうのがこのselectは自動生成されるものなので、 直接手を加えることができないのです。 なのでselect文には手を加えずに、値が変更されたときに 何か関数を呼び出すようなことをしたいのです。 無理ならしょうがないのですが、何か手があれば教えてください。 よろしくお願いします。

  • イベントハンドラを外部ファイルに分離させた時のevent.target

    イベントハンドラを外部ファイルに分離させた時のevent.target||event.srcElementの挙動について質問です。お願いします。xhtmlの<div>に直接書いていたeventハンドラを外部に分離しました。 JavaScript ------------------------------ function Test() { var n = document.getElementsByTagName('div')[0]; n.onmouseover = function() { var m = event.target||event.srcElement; var j = m.tagName; alert(j); } } $(function() { Test(); }); ------------------------------ xhtml ------------------------------ <div> <p><img src="img01.png" width="300" height="300" /></p> </div> ------------------------------ n.onmouseover後のfunction()ですが、FireFoxで動きません。 function()をfunction(event)にするとFireFoxで動くようになりますが、IEで動かなくなります。 FireFox、IE両方動くようにするにはどういう記述にしたらいいでしょうか?

  • ajaxを使用してckeditorを表示したい

    PHPとjquery1.3 で ajax を使用し、下記のような処理を書いてみました。 text.phpにckeditorを表示させたいのですが、どのようにすればいいのでしょうか? ソースコードで教えて頂けると助かります! ちなみに呼び出しもとのファイルでの ckeditor の動作は確認できました。 よろしくお願いします。 ■呼び出し元のhtml <html> <head> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="ckeditor/ckeditor.js"></script> <script type="text/javascript"> $( function() { $("select").change(function () { var value = ""; $("select option:selected").each(function () { value += $(this).val(); }); $("#out").load("text.php?name=" + value); }).change(); }); </script> <title>テスト</title> </head> <body> <select name="text"> <option value="normal">テキスト入力</option> <option value="html">htmlエディター</option> </select> <div id="out"></div> </body> </html> ■text.phpの内容 <? if(isset($_GET['name'])){ $name = $_GET['name'];} if($name == "normal"){ ?><textarea cols="80" rows="10">テキスト入力</textarea><? }elseif($name == "html"){ ?><textarea class="ckeditor" id="editor" cols="80" rows="10">htmlエディター</textarea><? } ?>

専門家に質問してみよう