jQueryコールバック関数でテキストを変更する方法

前へ 次へ
このQ&Aのポイント
  • jQueryのコールバック関数を使用してテキストを変更する方法を学んでいます。
  • 具体的には、上記のソースコードで、iとoriginalというパラメーターがどのように取得されるのかを理解したいと思っています。
  • 回答をお待ちしています。
回答を見る
  • ベストアンサー

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> 教えていただけないでしょうか？ 宜しくお願いします。

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

  • ベストアンサー
  • think49
  • ベストアンサー率59% (285/482)
回答No.3

#2 です。補足を読みました。 > 前の補足にも書いたのですが、第1引数がなぜ０なのかわかりません。 index なのだから配列と同じように 0 から始まるものだと思いますが、「どういう理由で何が入るはず」とお考えなのでしょうか？ # Re: tezzo047さん

tezzo047
質問者

お礼

あ！その0でしたか.... ありがとうございました。

その他の回答 (2)

  • think49
  • ベストアンサー率59% (285/482)
回答No.2

jQueryオブジェクトの 要素index, 要素値 に callback 関数で処理する仕様だからではないでしょうか。 最も、IDセレクタでそれをやる意味はない(indexが一つしかない)と思いますが…。 http://api.jquery.com/text/#text-function # Re: tezzo047さん

tezzo047
質問者

補足

前の補足にも書いたのですが、第1引数がなぜ０なのかわかりません。

  • b0a0a
  • ベストアンサー率49% (156/313)
回答No.1

そうjQueryが作られてるからです。 それ以上の理由はありません。 ライブラリ作者が、そう動けば便利だと思ったから、そういう動作になるように作ったのです。 jQueryはかなりブラックボックス度の高いライブラリなので、 仕組みは気にしないで、どんどん便利なものとして覚えて使っていく方がいいです。 その意味でもっと分かりやすくコーディングしたければ、ライブラリを使わないことです。

tezzo047
質問者

補足

第1引数のindexが分からないのですが...

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

関連するQ&A

  • jqueryについて質問です。

    jqueryについて質問です。 ----------------------------------------------------------- test.js $(window).load(function() { $("body").load("a.php"); $("#btn").click(function() { alert();///動作しない } }); ----------------------------------------------------------- a.html <input type="button" id="btn" name="btn" value="send"> ----------------------------------------------------------- load先のidのクリックを監視するにはどうしたらいいのでしょうか？

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

    jQueryを使って、ボタンを押すと要素を追加しています。 後から追加された要素はマウスホバーなどが有効にならないのですが、 対象方法などあるでしょうか。 下記のようなソースで質問の状態になります。 よろしくお願いします。 <html> <head> <title>test</title> <script type="text/javascript" src="system/jquery-1.3.2.min.js"></script> <script type="text/javascript"> <!-- jQuery(document).ready(function($){ jQuery(".edit").hover( function () { jQuery(this).css("background","yellow"); }, function () { jQuery(this).css("background","none"); } ); jQuery(".insert").click(function () { var html = "<div class='edit'><p>add-text</p></div>"; jQuery("#sortable .edit:first").before(html); }); }); // --> </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><!-- id="sortable" --> </body> </html>

  • jQuery 動的にボタンが増えた時

    <html> <head> <title>js sample</title> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> jQuery(document).ready( function() { $(".button_cls_1").click(function(){ alert('hello world! button 1'); }); $(".button_cls_2").click(function(){ alert('hello world! button 2'); }); }); </script> </head> <body> <input class="button_cls_1" type="button" value="テスト１" /> <input class="button_cls_2" type="button" value="テスト２" /> </body> </html> 上記のようなスクリプトでbutton_cls_1、button_cls_2が動的に増えた時に どのように書いたらいいかわかりません。 button_cls_1、button_cls_2、button_cls_3、button_cls_4の時もあれば button_cls_1、button_cls_2の時もあります。

  • Jquery　と　JqueryUIについて

    現在、Jquery　と　JqueryUIを使ってプログラムを書いています。上手く動作しないので以下について教えてください。 やりたいことは、ボタンを押すと文字があらわれたり消えたりするという動作を実現したいと思っていますが、今は、ボタンと文字が表示されるのみで、ボタンを押しても全く動きません。 現在書いているコードは以下のとおりです。 ---- <html> <head> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> <script> $(function() { $('#button').click(function(){ $('#sample-text').show(); }); }); </script> </head> <body> <input type="button" id="button" value="ボタン"> <p id="sample-text">Hello World!</p> </body> </html> ------------------- Jqueryのバージョンは、最初、UIとの互換性を考え、1.3.2を使っていましたが、動かないため、現在は新しいバージョンで試してみたところです。(１．４．４でもだめでした） JSファイルの場所は、上記htmlファイルと同じ階層のjsディレクトリ内です。 また、補足ですが、これが上手くいけば、script内の　show メソッドのかわりに　ｔoggleを使いたいと考えています。 上記コードで間違っている部分がわかる方がいらっしゃいましたら教えてください。 よろしくお願いいたします。

    • ベストアンサー
    • AJAX
  • JQueryでfunctionに引数としてIDを渡して処理する方法

    HTMLの制御にjQueryを使用しています。 functionに引数としてIDを渡して処理をしたいのですが、やりかたが分かりません。 テスト的にtest1Script、test2Scriptを作成しました。 test1と同様の結果を、引数にIDを渡すtest2Scriptでも得たいのですが、 失敗(1)や失敗(2)のように書いた場合、うまくいきません。何か良い方法はないでしょうか。ご教授下さい。 <script type="text/javascript"> function test1Script(){ alert($("#textfield1").val()); } function test2Script(objId){ //alert($("#objId").val()); 失敗(1) //alert($(#objId).val()); 失敗(2) } </script> </head> <body> <input type="text" id="textfield1" value="test1" /> <input type="button" id="button1" value="テスト1" onclick="test1Script();" /> <input type="button" id="button2" value="テスト2" onclick="test2Script('textfield1');" /> </body> </html>

  • jQueryでajax

    ajax（jQuery使用）を使った以下のサンプルは、 セレクトボックスを選択すると、ボタンを表示するのですが、 そのボタンをクリックしても、アラート（This is success!）が表示されません。 ajaxで吐き出した<button>ボタン</button>のボタンのクリックイベントが 検知しないような感じですが、いったいどこが間違っているのかわかりません。 どなたか、ご教授いただけると助かります。 htmlソース ------------------------------------------- <meta http-equiv="content-script-Type" content="text/javascript" /> <meta http-equiv="content-style-Type" content="text/css" /> <link rel="stylesheet" href="./photo.css" media="all" /> <title> テスト</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { alert("Test is success!"); }); $(".first").change(function() { var param = ''; $.ajax ({ type: "POST", url: "ajax.php", data: param, cache: false, success: function(res) { $("#result").html(res); } }); }); }); </script> </head> <body> <select name="first" class="first" id="first"> <option value="1">項目１</option> <option value="2">項目２</option> </select> <p>結果：</p> <div id="result" style="width:808px;"></div> </body> </html> phpソース ---------------------------------------- <?php echo '<button>ボタン</button>'; ?>

    • ベストアンサー
    • AJAX
  • コールバック関数が動かない

    Ajaxでサーバ通信を試みています。 Javaは少しわかるんですが、JvascriptやjQueryはサッパリちんぷんかんぷんな状態です。 今、ボタンクリックで「doAction()」を呼んで、Javaのクラス「/greetinglist」に キーワード「id」を渡して検索結果を受け取って表示しようとしています。 function doAction() は働いて、Java側の検索もできてるんですけど、そこで終了してしまいます。 コールバック関数「function callback(resp)」が動いてくれません。 FireBugで動きを追っていますが、特にエラーはないようです。 「function doAction()」 はjQueryを使っていますが、「function callback(resp)」はJavaScript だという認識です。 <script type="text/javascript" src="js/datastore.js"></script> <script src="/js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> //<![CDATA[ function doAction(){ var id = $('#month').val(); console.log("id==========" + id); $.getJSON('/greetinglist',{id:id},callback,"json"); } function callback(resp){ var json = eval(request.responseText); var res = ''; for (var i = 0;i < json.length;i++){ res += '<td>' + json[i].month + '</td>' + '<td>' + json[i].tenDays + '</td>' + '<td>' + json[i].greeting + '</td>' + '<td><a href="greetingdetail.html?id=' + json[i].id + '">詳細</td>'; } var obj = document.getElementById("datatable"); obj.innerHTML ='<tr><td>id</td><td>月</td><td>旬</td><td>文章</td><td>編集</td></tr>' + res; console.log("res==========" + res); }

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

    ■以下のHTMLが1～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('変更されました。'); }); ご教示願います。。

  • jqueryを使いajaxで取得したデータをコールバック関数外で取得する方法

    下記のようなスクリプトでjQueryを使い、ajaxでtextを取得します。 コールバック関数内では、もちろんtextが使えるのですが、コールバック関数外からはtextに一切アクセスできなくなります。 このようにグローバルからajaxで取得したデータは取得できないのでしょうか？ prototype.jsでも同じ結果です。 グローバルからの取得法、ご存知の方いらっしゃいましたらご教示頂ければと思います。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"><!-- $(document).ready(function (){ $.get("./sample.txt",function(text){ alert(text); // textが取得できる }); }); alert(text); // textが取得できない // --></script>

  • jQueryについて教えてください

    現在ドットインストールでjQueryを勉強しています いきなりつまずいたといいますかエラー？があります 以下のコードなのですが文字色（<p>）が赤色になりません なぜでしょうか？ このコードではjQueryはDLせずに読み込ませています DLしたほうがいいでしょうか？ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <head> <body> <p>jQueryの練習</p> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function () { $('p').css('color', 'red'); }); </script> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する