javascript - 更改单击元素的索引

Question

我想要将单击的列表元素居中(因此，例如，如果我单击最左边的元素，那么它会移动到中间，替换当前的中间元素)。

所以我认为也许切换当前“事件”和单击元素的索引可能值得一试。但我无法更改元素的索引值。

最好的解决方案是更改每个列表元素的索引，以便它们保持某种逻辑顺序并将单击的元素居中。

我是 JS 初学者，所以我知道可能有更好的方法，所以我愿意接受建议。 ;)

所以，我正在考虑两个解决方案:

它用单击的元素替换其位置。例如:

1 - 2 - 3 - 4 - 5 
3 is middle and I click 5 
The new order : 1 - 2 - 5 - 4 - 3 

它移动列表中的每个元素。例如:

1 - 2 - 3 - 4 - 5 
3 is middle and I click 5 
The new order : 3 - 4 - 5 - 1 - 2 

这是代码笔:http://codepen.io/anon/pen/wMOZVd

function horizontalSlider() {
  var sliderElement = $('.horizontal-slider ul li');
  var active = $('.horizontal-slider .active');
  var activeIndex = active.index();
  var center = Math.floor(sliderElement.length / 4);

  sliderElement.click(function() {
    var thisElement = $(this).index();
    var newActive = $('.horizontal-slider .active');
    var newActiveIndex = newActive.index();
    if (thisElement == newActiveIndex) {
      $(this).addClass('active').children().addClass('active-sub');
    } else {
      $(this).addClass('active').children().addClass('active-sub');
      newActive.removeClass('active').children().removeClass('active-sub');
    }
  });
}

horizontalSlider();

.horizontal-slider {
  text-align: center;
  width: 100%;
  margin: 0 auto;
}
.horizontal-slider ul {
  display: inline-block;
  text-transform: uppercase;
  font-size: 2rem;
  width: 100%;
}
.horizontal-slider ul li {
  padding: 3%;
  cursor: pointer;
}
.horizontal-slider ul ul {
  display: none;
}
.active {
  transition: all .5s ease;
  font-weight: 900;
  position: relative;
  transform: scale(1.25);
}
.active-sub {
  top: 70%;
  left: 1%;
  display: block !important;
  position: absolute;
}
.active-sub li {
  text-transform: none;
  font-size: 0.9rem;
  font-weight: 500;
}
li {
  list-style: none;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="horizontal-slider relative">
  <ul>
    <li>Mar 16
      <ul>
        <li>Lorem ips</li>
      </ul>
    </li>
    <li>Apr 04
      <ul>
        <li>Lorem ips</li>
      </ul>
    </li>
    <li>May 22
      <ul>
        <li>Lorem ips</li>
      </ul>
    </li>
    <li class="active">Jun 30
      <ul class="active-sub">
        <li>Lorem ips</li>
      </ul>
    </li>
    <li>Jul 12
      <ul>
        <li>Lorem ips</li>
      </ul>
    </li>
    <li>Aug 15
      <ul>
        <li>Lorem ips</li>
      </ul>
    </li>
    <li>Sep 03
      <ul>
        <li>Lorem ips</li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

因为要删除节点并将其插入到其他地方，所以需要使用animation而不是transition。

如果有不清楚的地方，请告诉我。

function horizontalSlider() {
  var sliderElement = $('.horizontal-slider ul li');
  var active = $('.horizontal-slider .active');
  var activeIndex = active.index();
  var center = Math.floor(sliderElement.length / 4);

  sliderElement.click(function() {
    var elem = $(this);
    var thisElement = elem.index();
    var newActive = $('.horizontal-slider .active');
    var newActiveIndex = newActive.index();
    if (thisElement == newActiveIndex) {
      elem.addClass('active').children().addClass('active-sub');
    } else {
      elem.addClass('active').children().addClass('active-sub');
      console.log(thisElement < 3);
      var middle = $('.horizontal-slider>ul>li:nth-child(' + (thisElement < 3 ? '4' : '3') + ')');
      $(this).insertAfter(middle);
      newActive.removeClass('active').children().removeClass('active-sub');
    }
  });
}

horizontalSlider();

.horizontal-slider {
  text-align: center;
  width: 100%;
  margin: 0 auto;
}
.horizontal-slider ul {
  display: inline-block;
  text-transform: uppercase;
  font-size: 2rem;
  width: 100%;
}
.horizontal-slider ul li {
  padding: 3%;
  cursor: pointer;
}
.horizontal-slider ul ul {
  display: none;
}
.active {
  animation: active .5s ease forwards;
}
.active-sub {
  top: 70%;
  left: 1%;
  display: block !important;
  position: absolute;
}
.active-sub li {
  text-transform: none;
  font-size: 0.9rem;
  font-weight: 500;
}
li {
  list-style: none;
  display: inline-block;
}

@keyframes active {
  to {
    font-weight: 900;
    position: relative;
    transform: scale(1.25);  
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="horizontal-slider relative">
  <ul>
    <li>Mar 16
      <ul>
        <li>Lorem ips</li>
      </ul>
    </li>
    <li>Apr 04
      <ul>
        <li>Lorem ips</li>
      </ul>
    </li>
    <li>May 22
      <ul>
        <li>Lorem ips</li>
      </ul>
    </li>
    <li class="active">Jun 30
      <ul class="active-sub">
        <li>Lorem ips</li>
      </ul>
    </li>
    <li>Jul 12
      <ul>
        <li>Lorem ips</li>
      </ul>
    </li>
    <li>Aug 15
      <ul>
        <li>Lorem ips</li>
      </ul>
    </li>
    <li>Sep 03
      <ul>
        <li>Lorem ips</li>
      </ul>
    </li>
  </ul>
</div>