人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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;
},
});
}

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


●質問者: AKI-NAMI
●カテゴリ:ウェブ制作
✍キーワード:Ajax Click HTML JavaScript ON
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● GoldenDawn
●100ポイント ベストアンサー
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

◎質問者からの返答

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

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


2 ● kebo987654
●100ポイント

リンクには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をセットする段階?でもprototypeを使っているのでコードが短くなっているんですね。


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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ