下記の内容で、リンクを表示させていますが、このままでは、リンク毎に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;
},
});
}
質問の仕方がこれでいいとよいのですが、ご不明な点があればコメント欄に入れてください。
No.1
426
81
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", ... ) ; ... }
このような感じでどうでしょうか。
No.1
42681
ここでベストアンサー
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", ... ) ; ... }
このような感じでどうでしょうか。
動きました。ありがとうございます。
初心者には何をやっているのかわかりやすかったです。
No.2
3810
100pt
リンクにはclass="link"が指定されているとのことでしたので、
document.getElementsByClassName
を使ってクラスにlinkが指定せれているエレメントを得てイベントを設定します。
これでid毎に関数を用意する必要はなくなります。
29
29
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);
},
});
}
こちらも動きました。
idをセットする段階？でもprototypeを使っているのでコードが短くなっているんですね。
イルカ賞は悩みます･･･
GoldenDawn
2009/08/28 23:32:41
1
2
1
1
1
1
AKI-NAMI
kebo987654
動きました。ありがとうございます。
初心者には何をやっているのかわかりやすかったです。