这就是为.back、.next 和.tag 元素赋予特定的行为。
为了使代码井井有条，几乎所有事情都使用事件处理程序，包括为了方便和可重用性，自定义事件处理程序如下：
- 'findPrev' 事件处理程序，用于查找集合中的前一个标签，
- 'findNext' 事件处理程序，用于查找集合中的下一个标记。
$(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
一旦您考虑到这一点，作为奖励，添加一些额外的行来启用/禁用Back 和Next 按钮以响应单击标签是相对简单的。这可以包括更多的自定义事件处理程序：
- Back 和 Next 元素的“启用”事件处理程序，
- Back 和 Next 元素的“禁用”事件处理程序。
$(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> Back 和 Next 元素代替超链接可以稍微简化事情。可以固有地禁用/启用适当的按钮，而不会与href 属性混淆。
- 自定义事件也可以表述为 jQuery 插件，这是可行的，但对于简单的功能来说可能是多余的。