Question

我有一个使用CSS围绕它放置图标的圆圈。在mouseenter或click上，html内容存储为属于图标的变量，并输出到圆心的内部。每个图标都有一个确定其位置的类。（例如，第一，第二，第三等）。

我想将任何一个活动图标移动到顶部（第一个）并将所有其他图标分别放在行中。所以，如果我点击带有＆＃34;第三个＆＃34;类的图标上的/ mouseenter，我想： a）删除“活跃”＆＃39;来自活动元素的类（完成） b）添加“活跃”＆＃39;这个元素的类（完成） c）将这个元素的类改为“第一个”，这将使第四个元素的类成为第二个＆＃39;第二个＆＃39;第五个＆＃39; s＆＃39; ;第三＆＃39;等等。

我开始做每个＆＃39;将当前类存储在变量中，但是我然后转到parent（）来更改类attr（），但是无法弄清楚如何以循环方式将其作为目标来将类向下移动线。您可以在下方看到移动“活跃”代码的代码。类以及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);

关键词：

我将位置的类更改为数字（位置-1，位置-2等）。

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

基本上来自第38行的东西（你的旧东西）可能仍然需要在我设置位置等级的第35行不同地应用。

它循环遍历每个项目，并根据它们点击的位置和原始数据项索引号确定要分配给该特定元素的位置类。我们将假设dom中元素的顺序与data-item-index相同。从理论上讲，我们可能会删除数据项索引并使用一些jquery来确定所点击的项目在其父级中的5个图标的顺序中的位置，但我并没有打扰。

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

1 个答案: