这是关于给予.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
按钮响应点击标签。这可以包括一对夫妇更多的自定义事件处理程序:
- 了一步和下一步元素的“启用”的事件处理程序,
- 一个“禁用”事件上一步和下一步的元素处理。
$(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()
返回处理程序返回的任何内容。
- 对于Back和Next代替超链接,事情会略微简化为HTML
<button>
元素。正确的按钮可以固有地禁用/启用,而不会与href
属性混淆。
- 自定义事件也可以表述为jQuery插件,这对于简单的功能来说是可行的,但可以说是顶级的。
这也适用于我!开始学习,看看不同的事情会发生多大的变化,并且仍然会做同样的事情。 – spicedham