Récupérer la classe de chaque élément et passer à l'élément suivant dans la ligne - comme un round robin

Question

J'ai un cercle avec des icônes placées autour de lui en utilisant CSS. Sur mouseenter ou clic, le contenu html est stocké comme une variable appartenant à l'icône et sortie au centre du cercle. Chaque icône a une classe qui détermine sa position. (par exemple, premier, deuxième, troisième, etc.).

Je souhaite déplacer l'icône active vers le haut (en premier) et positionner tous les autres en ligne respectivement. Donc, si je clique/mouseenter sur l'icône avec une classe de "troisième", je voudrais: a) enlever la classe 'active' de l'élément actif (done) b) ajouter la classe 'active' à cette classe element (done) c) change la classe de cet élément en 'first', ce qui ferait que la classe du quatrième élément soit 'second', la cinquième 'third' et ainsi de suite sur la ligne. J'ai commencé par faire 'each' pour stocker la classe actuelle dans une variable, mais je vais ensuite au parent() pour changer la classe attr(), mais je n'ai pas compris comment le faire dans un round robin style pour déplacer la classe sur toute la ligne. Vous pouvez voir ci-dessous le code pour déplacer la classe 'active' ainsi que le contenu html. J'ai aussi un codepen moqué ici: https://codepen.io/jphogan/pen/KqdNYZ

// on circle click add/remove class and replace html 
$('.icon_circle_container .icon_circle').on('mouseenter click', function() { 
    // if it's already active, do nothing, but return false 
    if ($(this).hasClass('active')) { 
     return false; 
    } else { 
     // otherwise... 
     $('.icon_circle_container .icon_circle.active').removeClass('active'); // remove active class from element that has it 
     $(this).addClass('active'); // add active class to this element 
     newData = $(this).find('.icon_circle_content').html(); //store html as attribute 
     $('.icon_circle_container .center .icon_circle_content').fadeOut(function() { // fade out old content 
      $(this).html(newData).fadeIn(); // fade in new html content 
     }); // replace with stored data 
     return false; 
    } 
}) 

Answer 1

Codepen example

(function($) { 



$(document).ready(function() { 
    // on circle click add/remove class and replace html 
    $(".icon_circle_container .icon_circle").on("click", function() { 
     // if it's already active, do nothing, but return false 
     if ($(this).hasClass("active")) { 
     return false; 
     } else { 
     // otherwise... 

    // What is the new active index 
    var new_item = $(this).attr('data-item-index'); 

    // How many items total 
    var items_count = $('.icon_circle').length; 

    // Rotate 
    $('.icon_circle').each(function(index) { 
     var adjusted_index = index + 1; // Since js indexes from 0 
     var difference = adjusted_index - new_item; 
     if(difference == 0){ 
     console.log('activate '+ adjusted_index);   
     }else{ 
     console.log('not active '+adjusted_index); 
     if(difference > items_count){ 
      difference = difference - items_count; 
     }else if(difference < 1){ 
      difference = difference + items_count; 
     }   
     } 
     var position = difference + 1;  
     // This is where you can active things and set the proper position class on the item 
     $(this).removeClass('position-1 position-2 position-3 position-4 position-5').addClass('position-' + position); 
    }); 

    $(".icon_circle_container .icon_circle.active").removeClass("active"); // remove active class from element that has it 
    $(this).addClass("active"); // add active class to this element 
    newData = $(this).find(".icon_circle_content").html(); //store html as attribute 
    $(
     ".icon_circle_container .center .icon_circle_content" 
    ).fadeOut(function() { 
     // fade out old content 
     $(this).html(newData).fadeIn(); // fade in new html content 
    }); // replace with stored data 
    return false; 
    } 
}); 
// end document ready 
    }); 
    // end jquery wrap 
})(jQuery); 

choses clés:

J'ai changé les classes pour les postes à numérique (position 1, position 2 , etc).

Je n'ai pas regardé votre animation ou vos évanouissements. Essentiellement, les choses de la ligne 38 vers le bas (vos anciennes choses) peuvent encore avoir besoin de s'appliquer différemment autour de la ligne 35 où j'ai défini la classe de position.

Il passe en revue chaque élément et détermine la classe de position à affecter à cet élément particulier en fonction de l'endroit où il a cliqué et du numéro d'index de données de données d'origine. Nous allons supposer que l'ordre des éléments dans le dom est schématiquement le même que l'index de données. En théorie, nous pourrions probablement supprimer l'index de données et utiliser un certain jquery pour déterminer où l'élément cliqué se situe dans l'ordre des 5 icônes de son parent, mais je n'ai pas pris la peine de le faire.