これは、.back,.nextおよび.tag要素に特定の動作を与えることに関するすべてです。次のように整理コードを保つために
、それは利便性と再利用性のために、などのイベントハンドラでちょうど約すべて、カスタムイベントハンドラを行うことが有利です：
- 「findPrev」イベントハンドラ前のタグを見つけるために、セット内では、
- セット内の次のタグを見つけるための 'findNext'イベントハンドラ。
あなたはそれがで
Backと
Nextボタンを有効/無効にするには、いくつかの余分な行を追加することは比較的些細だボーナスとして、そのラウンドあなたの心を持ったら
$(document).ready(function() {
$(".nav .back").on('click', function(e) {
e.preventDefault();
if(this.href) { $(".wrapper .active").triggerHandler('findPrev').click(); }
});
$(".nav .next").on('click', function(e) {
e.preventDefault();
if(this.href) { $(".wrapper .active").triggerHandler('findNext').click(); }
});
$(".tag").on('findPrev', function() { // <<< custom event handler
var $tags = $(this).closest('.wrapper').find('.tag');
var index = $tags.index(this);
return (index > 0) ? $tags.eq(index - 1) : $();
}).on('findNext', function() { // <<< custom event handler
var $tags = $(this).closest('.wrapper').find('.tag');
var index = $tags.index(this);
return (index < $tags.length) ? $tags.eq(index + 1) : $();
}).on('click', function(e) {
e.preventDefault();
$(".wrapper .tag").filter(".active").removeClass('active').end().filter(this).addClass('active'); // move the 'active' highlight
// desired click action here
}).filter(".active").trigger('click');
});
Demo
タグをクリックすると応答します。戻ると、次の要素のイベントハンドラ、
戻ると次の要素のための「無効」イベントハンドラを「有効にする」
- ：これはカップルより多くのカスタムイベントハンドラを含めることができます。
$(document).ready(function() {
$(".nav .back").on('click', function(e) {
e.preventDefault();
if(this.href) { $(".wrapper .active").triggerHandler('findPrev').click(); } // find previous tag and 'click' it.
});
$(".nav .next").on('click', function(e) {
e.preventDefault();
if(this.href) { $(".wrapper .active").triggerHandler('findNext').click(); } // find next tag and 'click' it.
});
$(".nav .back, .nav .next").on('enable', function() { // <<< custom event handler
$(this).attr('href', '#'); // enable
}).on('disable', function() { // <<< custom event handler
$(this).removeAttr('href'); // disable
});
$(".tag").on('findPrev', function() { // <<< custom event handler
var $tags = $(this).closest('.wrapper').find('.tag');
var index = $tags.index(this);
return (index > 0) ? $tags.eq(index - 1) : $();
}).on('findNext', function() { // <<< custom event handler
var $tags = $(this).closest('.wrapper').find('.tag');
var index = $tags.index(this);
return (index < $tags.length) ? $tags.eq(index + 1) : $();
}).on('click', function(e) {
e.preventDefault();
$(".wrapper .tag").filter(".active").removeClass('active').end().filter(this).addClass('active'); // move the 'active' highlight
$(".nav .back").trigger($(this).triggerHandler('findPrev').length ? 'enable' : 'disable'); // manage the back button
$(".nav .next").trigger($(this).triggerHandler('findNext').length ? 'enable' : 'disable'); // manage the next button
// desired click action here
}).filter(".active").trigger('click'); // trigger 'click' to initialize everything
});
Demo
注：
.trigger()と.triggerHandler()の両方の使用が可能性が混乱しています。違いは返されるものにあります。 .trigger()は常にjQuery（連鎖用）を返しますが、.triggerHandler()はハンドラが返すものを返します。- ハイパーリンクではなく、HTML
<button>の要素で戻ると次の要素がわずかに簡略化されます。適切なボタンは、本質的には無効な/有効にすることができます.属性を迷惑にしないでください。
- カスタムイベントはjQueryプラグインとして表現することもできますが、これは実行可能ですが間違いなく簡単な機能のためにはトップにすぎません。
これも私のために働いた！学ぶことを始めてどのように異なることができ、同じことをやっているのか見てみましょう。 – spicedham