[jquery - scrollspy]

Par louroulou, il y a 11 ans

Javascript

Bonjour à tous, en suivant le tuto de grafikart sur le scrollspy, j'essaye de le mettre en place et de l'adapter à ma situation. A priori le script marche mais je voudrais faire une petite modification. au lieu de rajouter la classe "current" quand on change de section je voudrais changer d'image. En effet, dans le tuto, il y a une liste ul>li classique et on met la classe current. Dans mon cas c'est une suite d'image dans de div (des pastilles avec du texte dedans), et je voudrais changer le nom de l'image dans le href. Voici mon code html assez simple : (les images sont des pastilles les unes sous les autres sur la gauche du site) [code]

[/code] Voici le code du scrollspy : [code] (function($){ var sections = []; var id = false; var $subnav = $('.subnav'); var $subnava = $('a', $subnav); $subnava.click(function(e){ e.preventDefault(); $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top }); hash($(this).attr('href')); }); $subnava.each(function(){ sections.push($($(this).attr('href'))); }); $(window).scroll(function(e){ var scrollTop = $(this).scrollTop() + ($(window).height() / 2) for(var i in sections){ var section = sections*; if (scrollTop > section.offset().top) { scrolled_id = section.attr('id'); } } if (scrolled_id !== id) { id = scrolled_id; $subnava.removeClass('current'); $('a[href="#' + id + '"]', $subnav).addClass('current'); } }); })(jQuery); hash = function(h) { if(history.pushState) { history.pushState(null, null, h); }else{ location.hash = h; } }[/code] Donc à la fin du code, à chaque changement de section on a : $subnava.removeClass('current'); $('a[href="#' + id + '"]', $subnav).addClass('current'); moi au lieu de rajouter la classe current je voudrais changer le nom de chaque image : machin.png en machin-it.png Ca revient à changer.png en -it.png. Et faire l'opération dans le sens inverse lorsque la section change pour revenir à l'état normal. Merci à tous pour votre aide Louroulou

2 réponses

Azorgh, il y a 11 ans

Salut,

Je sais pas si c'est hyper propre, mais tu peux tenter quelque chose dans ce genre là :

Au lieu de

$subnava.removeClass('current');

Tu peux mettre : 

var $subnavimg = $('img', $subnava);
$subnavimg.each(function(e){
    $src = $(this).attr('src');
    $(this).attr('src', $src.replace('-it.', '.'));
});

Ce qui va supprimer tout les "-it" des images.

Et ensuite tu faire : 

$imgActive = $('a[href="#' + id + '"]', $subnav).children('img');
$imgActiveSrc = $imgActive.attr('src').replace('.', '-it.');
$imgActive.attr('src', $imgActiveSrc);

Pour ajouter le "-it" à l'image en cours.

Il y a surement plus opti, mais ça peut être une piste.

Cordialement,
PallMallShow.

louroulou, il y a 11 ans

merci beaucoup,
je test et je te dis