-
ID:yAniLO さんの質問

jQueryで紙芝居のように進んでいく内容を作りたいのですが、
「次へ」のボタンにページ毎に違う処理を与えたいので、
attrでボタンのIDを書き換える方法を考えたのですが
どうもうまく走りません。

あとから生成されたIDなので、動かないのはなんとなく想像がつき
「live」なども使ってみたのですが、ダメでした。

そもそもattrでボタンのIDを書き換える方法はあまり、得策では無いと思うのですが、通常このような場合どのようにするものでしょうか?

できれば、ひとつのボタンでスマートに作りたいのですが。

初歩的な質問だと思いますがよろしくお願いします。

みんなの回答 5 件

ID:At9oA0 さんの回答

これでいいんじゃね?

var fnc = [
function(){
console.log(0);
},
function(){
console.log(1);
},
function(){
console.log(2);
}
];

var count = 0;

ボタン.click(function(){
count;//countいじる。たとえば++count;
fnc[count]();
});

ID:yAniLO

プログラム不慣れなので、最初は意味がわかりませんでしたが
調べているうちに上記の意味がわかりました。
ありがとうございます!

ID:WMR47E さんの回答

スライドショーは置いといてだな、まずはページャーをつくってみれ。
1〜10までの範囲で、+ボタンで増えて、-ボタンで減するやつ。
console.log()で十分だし、分かんなかったらalert()でいい。
それできたら疑問は解決するはず。

ID:yAniLO

こちらも後に、おっしゃる意味がわかりました。
ありがとうございます。

ID:ak2QpN さんの回答

1の方と考え方は同じですが、idやclassを書き換えるのではなく、現在のページのカウントをアップ、ダウンさせて、ページによって処理を変えるやり方がシンプルかもしれませんね。

$(function(){
var count = 1;
$("#btn").click(function(){
count++;
switch (count) {
case 1: break;
case 2: break;
case 3: break;
default: break;
}
});
});

ID:yAniLO

1,2の方とこちらのコメントをベースに解決しました。
勉強になりました。

最終結果は次のようになりました。

ID:yAniLO さんの回答

初心者なりに書いた完成形です。

もっとこう書いたらスマートだろ!
というコメント
お待ちしております。

↓↓

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]();
});
});

ID:yAniLO

ん?switchにする必要ない??

ID:m/r5iW

switchいらんし、次へ、前への処理ならclick毎にイベントの割り当てもいらんよ。

ID:m/r5iW

次へ押す→if(page<fnc.length){page++;fnc[page]();}みたいなので対応できるはず。前へはpageが0以上で。

ID:At9oA0 さんの回答

動作確認はしてない。

$(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;
});

});

最終更新日:2013-09-24 (4,881 views)

関連するトピックス

ページ上部に戻る