jQueryで紙芝居のように進んでいく内容を作りたいのですが、
「次へ」のボタンにページ毎に違う処理を与えたいので、
attrでボタンのIDを書き換える方法を考えたのですが
どうもうまく走りません。
あとから生成されたIDなので、動かないのはなんとなく想像がつき
「live」なども使ってみたのですが、ダメでした。
そもそもattrでボタンのIDを書き換える方法はあまり、得策では無いと思うのですが、通常このような場合どのようにするものでしょうか？
できれば、ひとつのボタンでスマートに作りたいのですが。
初歩的な質問だと思いますがよろしくお願いします。
みんなの回答 5 件
これでいいんじゃね？
var fnc = [
function(){
console.log(0);
},
function(){
console.log(1);
},
function(){
console.log(2);
}
];
var count = 0;
ボタン.click(function(){
count;//countいじる。たとえば++count;
fnc[count]();
});
スライドショーは置いといてだな、まずはページャーをつくってみれ。
1〜10までの範囲で、+ボタンで増えて、-ボタンで減するやつ。
console.log()で十分だし、分かんなかったらalert()でいい。
それできたら疑問は解決するはず。
1の方と考え方は同じですが、idやclassを書き換えるのではなく、現在のページのカウントをアップ、ダウンさせて、ページによって処理を変えるやり方がシンプルかもしれませんね。
$(function(){
var count = 1;
$("#btn").click(function(){
count++;
switch (count) {
case 1: break;
case 2: break;
case 3: break;
default: break;
}
});
});
初心者なりに書いた完成形です。
もっとこう書いたらスマートだろ！
というコメント
お待ちしております。
↓↓
var page = 0;
var fnc = [
function(){
//ページ1のアクション
},
function(){
//ページ2のアクション
},
function(){
//ページ3のアクション
},
function(){
//ページ4のアクション
}
];
$(function(){
$("#next").click(function(){
page ++;
switch (page) {
case 1:
fnc[page]();
break;
case 2:
fnc[page]();
break;
case 3:
fnc[page]();
break;
default: break;
}
});
$("#before").click(function(){
page --;
switch (page) {
case 0:
fnc[page]();
break;
case 1:
fnc[page]();
break;
case 2:
fnc[page]();
break;
case 3:
fnc[page]();
break;
default: break;
}
});
//ページングを設置
$("#p00").click(function(){
page = 0;
fnc[page]();
});
$("#p01").click(function(){
page = 1;
fnc[page]();
});
$("#p02").click(function(){
page = 2;
fnc[page]();
});
$("#p03").click(function(){
page = 3;
fnc[page]();
});
});
動作確認はしてない。
$(function(){
var page = 0;
var fnc = [
function(){
//ページ1のアクション
},
function(){
//ページ2のアクション
},
function(){
//ページ3のアクション
},
function(){
//ページ4のアクション
}
];
$("#next").click(function(){
page++;
fnc[page]();
});
$("#before").click(function(){
page--;
fnc[page]();
});
// <a class="paging" href="#1"></a>
// <a class="paging" href="#2"></a>
// <a class="paging" href="#3"></a>
$("a.paging").click(function(){
var href = Number($(this).attr(’href’).replace(’#’, ’’));
fnc[href]();
return false;
});
});
関連するトピックス