javascript(prototype.js使用)の質問です。

下記の内容で、リンクを表示させていますが、このままでは、リンク毎にfunctionを用意しなければなりません。
例えば、クリックされたオブジェクトのidを取得して、そのidに対応するファイル名を読み込ませることができればと考えています。(下記では、$('recruit')と"recruit.html"になっていますが、clickされたidを取得、変数名id_nameに入れて、「id_name + ".txt"」 の形で読み込むことができれば)


window.onload = function(){
setEvent('$("recruit")','click','dispArticle');
}
function setEvent(objName,eventTypeName,funcName){
eval(objName + ".on" + eventTypeName + "=" + funcName);
}
function dispArticle(){
new Ajax.Request("recruit.txt",{
method: "post",
onComplete:
function(httpObj){
$('article-set').innerHTML = httpObj.responseText;
},
});
}

質問の仕方がこれでいいとよいのですが、ご不明な点があればコメント欄に入れてください。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2009/08/28 23:05:54
  • 終了:2009/08/29 17:00:11

ベストアンサー

id:GoldenDawn No.1

GoldenDawn回答回数426ベストアンサー獲得回数812009/08/29 08:01:20

ポイント100pt
onload = function() {
  var lks = document.getElementsByTagName('img') ; // img 要素以外も対象にする場合は '*' にする
  for (var i = 0; i < lks.length; ++i) {
    if (lks[i].id && lks[i].className == 'link') {
      if (document.all && document.attachEvent)
        lks[i].attachEvent('onclick', setFunction(lks[i].id)) ;
      else lks[i].addEventListener('click', setFunction(lks[i].id), false) ;
    }
  }
}

function setFunction(id) {
  return function() {
    new Ajax.Request(id + ".txt",
                     ...
                     ) ;
    ...
}

このような感じでどうでしょうか。


http://q.hatena.ne.jp

id:AKI-NAMI

動きました。ありがとうございます。

初心者には何をやっているのかわかりやすかったです。

2009/08/29 16:33:10

その他の回答(1件)

id:GoldenDawn No.1

GoldenDawn回答回数426ベストアンサー獲得回数812009/08/29 08:01:20ここでベストアンサー

ポイント100pt
onload = function() {
  var lks = document.getElementsByTagName('img') ; // img 要素以外も対象にする場合は '*' にする
  for (var i = 0; i < lks.length; ++i) {
    if (lks[i].id && lks[i].className == 'link') {
      if (document.all && document.attachEvent)
        lks[i].attachEvent('onclick', setFunction(lks[i].id)) ;
      else lks[i].addEventListener('click', setFunction(lks[i].id), false) ;
    }
  }
}

function setFunction(id) {
  return function() {
    new Ajax.Request(id + ".txt",
                     ...
                     ) ;
    ...
}

このような感じでどうでしょうか。


http://q.hatena.ne.jp

id:AKI-NAMI

動きました。ありがとうございます。

初心者には何をやっているのかわかりやすかったです。

2009/08/29 16:33:10
id:kebo987654 No.2

kebo987654回答回数38ベストアンサー獲得回数102009/08/29 08:58:51

ポイント100pt

リンクにはclass="link"が指定されているとのことでしたので、

document.getElementsByClassName

を使ってクラスにlinkが指定せれているエレメントを得てイベントを設定します。

これでid毎に関数を用意する必要はなくなります。

Event.observe(window,"dom:loaded",function(){
	var links=document.getElementsByClassName("link");
	for(
		var i=0;
		i<links.length;
		Event.observe(links[i++],"click",link_on_click)
	);
});

function link_on_click(){
	new Ajax.Request(this.getAttribute("id")+".txt",{
		method:"post",
		onComplete:function(httpObj){
			$('article-set').innerHTML=decodeURIComponent(httpObj.responseText);
		},
	});
}

http://q.hatena.ne.jp/

id:AKI-NAMI

こちらも動きました。

idをセットする段階?でもprototypeを使っているのでコードが短くなっているんですね。


イルカ賞は悩みます・・・

2009/08/29 16:59:17
  • id:GoldenDawn
    dispArticle を発動したい要素以外にも id は設定されていると思いますが、区別する方法はありますか。
  • id:AKI-NAMI
    >GoldenDawn様
    例として、dispArticle発動要素(リンク)には<img id="「流し込みたいファイル名」より" class="link" />をつけています。
    こんな回答でよろしいですか?
  • id:AKI-NAMI
    GoldenDawnさんのものは全てエラーなく動きましたが、kebo987654さんのものは、最初IE8でエラーが出て、try,catchで調べたところ、this.getAttribute・・・のところでIE,Firefox,Opera,Safari,Google Chromeの最新バージョン全てでエラーがでました。

    という訳でイルカ賞はGoldenDawnさんに差し上げました。
  • id:GoldenDawn
    イルカ賞ありがとうございます。
    ただ、せっかく prototype.js を使うのなら kebo987654 さんみたいなのがカッコイいですよね。
    お試し程度にちょろっとしか prototype.js をさわっていない私からは出ない回答です。

    実験的にコードを組んでみましたが、私の環境では getAttribute で特に問題がある様子はありませんでした。
    ただ、
    Event.observe(window, "load", function() { ...
    のようにしないと IE では動作しませんでした。
  • id:kebo987654
    Firefoxでうまく動いたのでいいだろうと思っていたら全然だめでした。
    今後気をつけます。

    GoldenDawnさんと同じく、IEで動作しませんでした。
    Event.observe(document,"dom:loaded",function(){...
    とすべきところを
    Event.observe(window,"dom:loaded",function(){...
    としていました。

    this.getAttributeのエラーの原因はわかりません orz
  • id:AKI-NAMI
    GoldenDawnさんのようにEvent.observe(window, "load", function() { ...
    としたらtry~catchでエラーは出るものの、リンクはセットされて、エラーを流せばとくにそれ以上の問題は起きていません。

    参考までにエラーメッセージです。
    IE8「TypeError オブジェクトでサポートされていないプロパティまたはメソッドです」
    Firefox「TypeError this.getAttribute is not a function」
    でした。

    お二方様、ありがとうございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません