Il s'agit de donner des comportements spécifiques aux éléments .back, .next et .tag.
Pour conserver le code organisé, il est avantageux de le faire à peu près tout avec des gestionnaires d'événements, y compris, pour la commodité et la réutilisabilité, les gestionnaires d'événements personnalisés comme suit:
- un gestionnaire d'événements « findPrev » pour trouver la balise précédente dans l'ensemble,
- un gestionnaire d'événement 'findNext' pour trouver l'étiquette suivante dans l'ensemble.
$(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
Une fois que vous avez votre esprit rond qui, en prime, il est relativement trivial d'ajouter quelques lignes supplémentaires pour activer/désactiver les boutons Back et Next dans réponse à cliquer sur les tags. Cela peut inclure un couple de gestionnaires d'événements plus personnalisés:
- un gestionnaire d'événements « enable » pour le dos et les éléments suivants,
- un gestionnaire d'événements « désactiver » pour le dos et les éléments suivants.
$(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
Notes:
- utilisation des deux
.trigger() et .triggerHandler() est peut-être source de confusion. La différence réside dans ce qui est retourné. .trigger() renvoie toujours jQuery (pour le chaînage), tandis que .triggerHandler() renvoie tout ce que le gestionnaire renvoie.
- Les choses se simplifieraient légèrement avec les éléments HTML
<button> pour Back et Next à la place des hyperliens. Les boutons appropriés peuvent être désactivés/activés de manière inhérente sans que cela ne nuise à l'attribut href.
- Les événements personnalisés peuvent alternativement être formulés sous la forme de plugins jQuery, ce qui est viable mais peut-être excessif pour une fonctionnalité simple.
Cela a également fonctionné pour moi! Commencer à apprendre voir à quel point les choses peuvent être différentes et faire toujours la même chose. – spicedham