从每个元素中获取 class 并移动到行中的下一个元素 - 就像循环法一样

Question

我使用 CSS 制作了一个圆圈，周围放置了图标。在鼠标输入或单击时，html 内容存储为属于图标的变量，并在圆心内输出。每个图标都有一个 class 来确定其位置。（例如第一、第二、第三等）。

我想将激活的图标移到顶部（第一个），并将所有其他图标分别排成一行。所以，如果我 click/mouseenter 在 class 为 "third" 的图标上，我想： a) 从活动元素中删除 'active' class（完成） b) 将 'active' class 添加到此元素（完成） c) 将此元素的 class 更改为 'first'，这将使第四个元素的 class 变为 'second'，第五个元素的 'third' 等等。

我开始做 'each' 将当前 class 存储在一个变量中，但是我然后去 parent() 更改 class attr()，但是无法弄清楚如何以循环方式将此作为目标以将 class 下线。您可以在下面看到移动 'active' class 以及 html 内容的代码。我在这里也有一个模拟的代码笔：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);

关键事项：

我将位置的 classes 更改为数字（位置 1、位置 2 等）。

我没有看你的动画或褪色的东西。

本质上，第 38 行以下的内容（您的旧内容）可能仍需要在我设置位置 class.

的第 35 行周围应用不同的内容

它循环遍历每个项目，并根据他们点击的位置和原始数据项目索引号找出分配给该特定元素的位置 class。我们假设 dom 中元素的顺序与数据项索引的顺序相同。理论上，我们可能会删除数据项索引并使用一些 jquery 来确定单击的项目在其父项中符合 5 个图标顺序的位置，但我没有打扰。

从每个元素中获取 class 并移动到行中的下一个元素 - 就像循环法一样

Grab class from each element and move to next element in line - like a round robin

javascript

each

jquery