• 締切済み

ループ内のaddeventlistner

reggaepuncの回答

回答No.6

jquery使うには、 javascriptが分かる必要がある。 ということですよね。。。 >だまって、bind つかいましょ (笑); ↑も、もしかしてもっと簡潔に書けたりします?(汗

関連するQ&A

  • なぜ、この場面で、ループ関数が必要なのでしょうか!

    プログラムレベルは下の下です。  以下のHPはhtmlとphpプログラムのコラボレです。  "表示"タグをクリックすれば、  "Google" "Yahoo" " CBS News" "abc NEws" のタグが出てきて、クリックすれば、ホームページが見れるという  単純なHPです。  そこで、分からに事があります。 sample6.htmlの中に"for"関数がありますが、ループ関数が使われています。 このプログラムのからくりを勉強中ですが、現在ループでつまづいています。_ _  なぜ、この場面で、ループ関数が必要なのでしょうか!?  以下プログラムです、宜しくお願いします。  ファイル名:sample6.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>配列とJSON</title> <script type="text/javascript" src="../lib/jquery-1.8.1.min.js"></script> <script type="text/javascript"> $(function (){ $("#exe").click(hello); }); function hello(){ $.get("sample6.php", {}, function(resp){ var json = eval(resp); var tags = ""; for (var i = 0; i < json.length; i++) { if(i==0){ tags +="<div>サーチ&ポータル</div>"; }else if(i==2){ tags +="<br/><div>USニュースサイト </div>"; } tags += '<a href="' + json[i].url + ' "> ' + json[i].name + '</a><br/>'; } $("#show").html(tags); }); ;} </script> </head> <body> <h2>配列、連想配列とJSON <input type="button" id="exe" value="表示 "/><h2> <p id="show"></p> </body> </html> ファイル名:sample6.php <?php $arr[0]["name"] = "Google"; $arr[0]["url"] = "http://www.google.co.jp/"; $arr[1]["name"] ="Yahoo!"; $arr[1]["url"] = "http://www.yahoo.co.jp/"; $arr[2]["name"] = "CBS News"; $arr[2]["url"] = "http://www.cbsnews.com/"; $arr[3]["name"] ="abc News"; $arr[3]["url" ]= "http://abcnews.go.com/"; header("Content-Type: text/javascript; charset=utf-8"); echo json_encode($arr); ?>

  • addEventListenerで

    window.addEventListener("load", addEvents, false); function addEvents() {  for (var i = 0; i < 3; i++) {   document.getElementById("hoge" + i).addEventListener("click", function() { check(i) }, false);  } } ---- というコードで、イベントを追加したのですが hoge0をクリック -> check(3)を呼び出し hoge1をクリック -> check(3)を呼び出し hoge2をクリック -> check(3)を呼び出し となってしまいます。つまり、引数にループの最後の数字+1が渡されてしまいます。 どうしたらよいのでしょうか?

  • 【AS3】配列を使って複数のボタンに別々のリンク先を指定するスクリプト

    【AS3】配列を使って複数のボタンに別々のリンク先を指定するスクリプトを教えてください。 配列を使って、btn1、btn2、btn3というインスタンスに それぞれ別のリンク先を設定したいと思っています。 実際には15個以上のリンクボタンを設置したいので、 配列を使ってできるだけ短いスクリプトにしたいです。 ---------------------------------------------- for (var i:int = 1; i < 4; i++) { this["btn"+i].addEventListener( MouseEvent.CLICK , onClick ); } function onClick( event:MouseEvent ) { var url:Array = new Array(); url[1]="http://www.yahoo.co.jp"; url[2]="http://www.google.co.jp"; url[3]="http://www.goo.ne.jp"; for(var i:int = 1; i < 4; i++){ if (this ["btn"+i]) { var link:URLRequest=new URLRequest(url[i]); var target:String="_self"; navigateToURL(link,target); } } } ---------------------------------------------- 上のように記述してみたのですが、全てのボタンが 配列一番最後のリンク先(url3)になってしまいます。 traceで「i」を出力してみると 1 2 3 と出るので、 for(var i:int = 1; i < 4; i++){}で 全て繰り返してしまっているらしいことはわかりますが どこをどう修正すればいいのかわかりません; 初心者で恐れ入りますが、易しくご教示いただけると幸いです。

    • ベストアンサー
    • Flash
  • 配列のループ展開

    下記で配列内を検索しても、「存在しません」になります。 どこが、間違っているのでしょうか? <?php for($i = 1; $i <= 42; $i++) { $seminar = "http://www.hoge.com/hoge/".sprintf("%04d", $i).".html"; echo $seminar; } $url = array( $seminar ); $myUrl = "http://www.hoge.com/hoge/0020.html"; if(in_array($myUrl, $url)){ echo "配列に".$myUrl."は存在します。"; } else { echo "配列に".$myUrl."は存在しません。"; } ?>

    • ベストアンサー
    • PHP
  • ajaxが難しいです。

    1 if (xhr.status === 200) { result.textContent = xhr.responseText; の部分がわからないのですが 自分で作った変数resultの中に通信に両方成功した場合サーバ側のPHPが生成したDOM要素を代入するという事をやっているのでしょうか? その結果、処理結果を表記するhtml<div id="result"></div>の中に、代入された中身が表記されるという事ですか? 2 下記のloadstartとloadなどう違うのでしょうか? xhr.addEventListener('loadstart', function() { // 画面に通信中と表記 result.textContent = '通信中...'; }, false); // 画面に通信中と表記 xhr.addEventListener('load', function() { result.textContent = xhr.responseText; }, false); 下記ソース ・ <?php sleep(3); print('こんにちは、'.$_REQUEST['name'].'さん!'); print('こんにちは、'.$_REQUEST['name2'].'さん!'); ?> ・ <!DOCTYPE html> <html> <head> <meta name="robots" content="noindex,noimageindex,nofollow"><!-- Onlysample --> <meta charset="UTF-8" /> <title>JavaScript本格入門</title> </head> <body> <form> <label for="name">名前:</label> <input id="name" type="text" name="name" size="15" /> <input id="btn" type="button" name="submit" value="送信" /> <label for="name">名前2:</label> <input id="name2" type="text" name="name2" size="15" /> <input id="btn2" type="button" name="submit" value="送信" /> </form> <div id="result"></div> <div id="result2"></div> <script src="scripts/hello_ajax.js"></script> </body> </html> // 非同期通信を行うための準備 document.addEventListener('DOMContentLoaded', function() { document.getElementById('btn').addEventListener('click', function() { var result = document.getElementById('result'); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { result.textContent = xhr.responseText; } else { result.textContent = 'サーバーエラーが発生しました。'; } } else { result.textContent = '通信中...'; } }; /* xhr.addEventListener('loadstart', function() { result.textContent = '通信中...'; }, false); xhr.addEventListener('load', function() { result.textContent = xhr.responseText; }, false); xhr.addEventListener('error', function() { result.textContent = 'サーバーエラーが発生しました。'; }, false); */ xhr.open('GET', 'hello_ajax.php?name=' + encodeURIComponent(document.getElementById('name').value), true); xhr.send(null); }, false); document.getElementById('btn2').addEventListener('click', function() { var result = document.getElementById('result2'); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { result.textContent = xhr.responseText; } else { result.textContent = 'サーバーエラーが発生しました。'; } } else { result.textContent = '通信中...'; } }; /* xhr.addEventListener('loadstart', function() { result.textContent = '通信中...'; }, false); xhr.addEventListener('load', function() { result.textContent = xhr.responseText; }, false); xhr.addEventListener('error', function() { result.textContent = 'サーバーエラーが発生しました。'; }, false); */ xhr.open('GET', 'hello_ajax.php?name2=' + encodeURIComponent(document.getElementById('name2').value), true); xhr.send(null); }, false); }, false); 最後に、クリックした際にJSでDOM生成して、新たな要素を表記することとajaxは、 閲覧者からすると同じように見えるのですが、 違いは、ajaxはブラウザ上で生成したのではなく、 サーバ側のPHPが生成したDOM要素をダウンロードして代入するという、違いでしょうか? つまりサーバ側でDOMを作ったらajax、ブラウザ上で作ったらただのDOM生成という事ですか?

  • 【AS3】ループ処理で関数名を作成するには?

    ActionScript3.0についてご教授ください。 forなどを使い、ループ処理を使って変数名を作成する要領で 関数名を作ることは可能なのでしょうか? やりたい処理を記述させて頂きますと次の通りです。 ステージにある3つのボタン「btn0」「btn1」「btn2」に対して マウスクリック時の処理を書こうとしている例文です。 もちろん、これではエラーになります。 for( var i:int; i<3; i++ ){   this["btn"+i].addEventListener( MouseEvent.MOUSE_DOWN,"on"+i );   function "on"+i( e:MouseEvent ):void{     trace( e.target.name );   } } こうした処理を実現したい場合、"on"+i 部分をどのように記述すると良いのでしょうか? もしご存知でしたらお知恵をいただけないでしょうか。 よろしくお願い致します。

    • ベストアンサー
    • Flash
  • arrayの中で、ループを使った採番など。

    前回の続きになるのですが、下記の様に、arrayを複数にすると動かなくなります。 何が間違っているのでしょうか? $url = array(); for($i = 1; $i <= 42; $i++) { $seminar = "http://www.hoge.com/seminar/".sprintf("%04d", $i).".html"; $url[] = $seminar; } $test = array( "http://www.hoge.com/seminar/0043_01.html" "http://www.hoge.com/seminar/0043_02.html" ); $array = array($url, $test); $myUrl = "http://www.hoge.com/seminar/0045.html"; if(in_array($myUrl, $array)){ echo "配列に".$myUrl."は存在します。"; } else { echo "配列に".$myUrl."は存在しません。"; }

    • ベストアンサー
    • PHP
  • AS3の配列の中にアクセス

    FlashCS3でas3を使っています。 配列についての質問なのですが、 下記のコードがあるとします。 var btn_arr:Array=[aboutA_mc,aboutB_mc,aboutC_mc,aboutD_mc]; 配列に格納したボタン全てに、同じマウスアクションをつけたい場合など、 for (var i:int = 0; i<btn_arr.length; i++) { btn_arr[i].addEventListener(MouseEvent.Roll_Over,abcdOver); } function abcdOver(e:MouseEvent):void { btn_arr[i].textColor = #FFFFF; とかで、出来るかなと思ったのですが、上手くいきません。 何か良い方法があれば、ご教授よろしくお願いいたします。

    • ベストアンサー
    • Flash
  • AS3.0でボタン処理をまとめて書くには?

    はじめまして。当方、最近プログラム的なものを始めたばかりで困っています。 例えばルートにbtn0,btn1,btn2という3つのムービークリップを置いたとして、 ボタンを押したらそれぞれのムービークリップ名をトレースするには、 AS2.0以前ではルートのフレームアクションで for (var i=0;i<3;i++){  _root.["btn" + i].onRelease = function{   trace(this._name);  } } といった感じでforループでまとめられると思うのですが、 3.0ではどうしたらよいのか見当もつかず困っています。 for (var i=0; i<3; i++) {  ["btn"+i]addEventListener(MouseEvent.CLICK,over); } このようにまとめてリスナーに登録したとしても、 リスナー関数が別になってしまうので、this.nameは使えず…はて。といったところです。 なにとぞご教示よろしくお願い申し上げます。

    • ベストアンサー
    • Flash
  • ラジオボタンの入力制御について(表示した時のみ制御を行う)

    yesの場合はid=ABを表示し、noの場合はid=ABを非表示にする制御を行っています。 両方yesの場合は表示。両方noの場合は非表示。 片方がnullの場合は、yesで表示しnoで非表示としています。 ここまでの動作は、問題ないのですが id=ABを表示した場合、hoge3が入力必須となり id=ABを表示しない場合、hoge3は入力必須ではないように制御を行いたいと思っています。 他書き込みを参考にしたのと、自身で書いたものが混じって非常に汚くなっていますが ご教授願えませんでしょうか。 <script type="text/JavaScript"> <!-- function test1(){ if(document.getElementById("id01").checked) { document.getElementById('AB').style.display = ""; }else if(document.getElementById("id02").checked) { document.getElementById('AB').style.display = ""; for(i = 0; i <= 1; i ++){ document.form1.hoge3[i].checked = false; } }else{ document.getElementById('AB').style.display = "none"; for(i = 0; i <= 1; i ++){ document.form1.hoge3[i].checked = false; } } } //以下はhttp://oshiete1.goo.ne.jp/qa2119460.htmlを参考にしました function test2(f){ for (var i=0;i<f.length;i++){ if(f[i].type=="radio" && f[i].name=="hoge3" && f[i].checked==true) return true; } alert("AかBを選んでください"); return false; } //--> </script> <form name="form1" onload="test1()"onsubmit="return test2(this)"> <br> <input type="radio" name="hoge1" value="1" id="id01" onClick="test1();">yes<br> <input type="radio" name="hoge1" value="0" onClick="test1();">no<br> <br> <input type="radio" name="hoge2" value="1" id="id02" onClick="test1();">yes<br> <input type="radio" name="hoge2" value="0" onClick="test1();">no<br> <br> <p id="AB" style="display:none;"> <input type="radio" name="hoge3" value="1">Aへ進む<br> <input type="radio" name="hoge3" value="2">Bへ進む<br> </p> <br> <input type="submit" value="次へ"> </form>