Как я могу получить предыдущий индекс?

Question

У меня есть щелчок, задача, чтобы получить текущий и предыдущий индекс элемента.

$('.item').click(function() {
  var index = $('.item').index(this),
    indexLast = 'here prev index';

  $('.result').text(index + ', ' + indexLast);
});

.wrap {
  display: flex;
}

.item {
  background-color: #2ecc71;
  width: 50px;
  height: 50px;
  margin: 0 10px;
  border-radius: 50%;
  cursor: pointer;
}

.item:nth-child(even) {
  background-color: #3498db;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="result"></div>

Пример: мы нажали на 3. А затем на 6. Мне нужно получить. index == 6, lastIndex == 3.

Answer 1

Вы имеете в виду, как это:

    var indexLast = '';
    $('.item').click(function() {
      var index = $('.item').index($(this));

      $('.result').text( 'current: ' + index + ', previous: ' + indexLast);
      indexLast = index
    });

    .wrap {
      display: flex;`enter code here`
    }

    .item {
      background-color: #2ecc71;
      width: 50px;
      height: 50px;
      margin: 0 10px;
      border-radius: 50%;
      cursor: pointer;
    }

    .item:nth-child(even) {
      background-color: #3498db;
    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="wrap">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="result"></div>

Answer 2

В качестве альтернативы хранению в переменной вы можете добавить класс к тому, по которому щелкаете, и затем проверять этот класс при следующем щелчке.

$(".wrap>.item").click(function() {
    var last = $(this).siblings(".active").removeClass("active");
    $(this).addClass("active");

   // output last.text() / $(this).text() as needed
});

Использование кнопок OPs и индекса this.last() как указано в вопросе:

$('.item').click(function() {
  var indexLast = $(".item.clicked").index();
  var index = $(this).index();
  $(this).addClass("clicked").siblings().removeClass("clicked");
  $('.result').text(index + ', ' + indexLast);
});

.wrap {
  display: flex;
}

.item {
  background-color: #2ecc71;
  width: 50px;
  height: 50px;
  margin: 0 10px;
  border-radius: 50%;
  cursor: pointer;
}

.item:nth-child(even) {
  background-color: #3498db;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="result"></div>

Расширение этого значения для отображения активных / lastactive с использованием css дает:

$(function() {
  $(".wrap>.item").click(function() {
    var last = $(this)
      .siblings()
      .removeClass("lastactive")
      .filter(".active")
      .removeClass("active")
      .addClass("lastactive");
    $(this).addClass("active");
  });
});

.item {
  border: 1px solid black;
  height: 20px;
}

.active {
  background-color: yellow;
}

.lastactive {
  background-color: #CCC;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="result"></div>

Answer 3

'use strict';
let indexLast = 'here prev index', current_i = 'here prev index'

$('.item').click(function() {
  let index = $('.item').index(this),
  last_i = current_i;
  current_i = index;
  $('.result').text(current_i + ', ' + last_i);
});

.wrap {
  display: flex;
}

.item {
  background-color: #2ecc71;
  width: 50px;
  height: 50px;
  margin: 0 10px;
  border-radius: 50%;
  cursor: pointer;
}

.item:nth-child(even) {
  background-color: #3498db;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="result"></div>

Answer 4

Пожалуйста, используйте это. Надеюсь, это сработает для вас.

var totalClickedArray = [];
$('.item').click(function() {
  var index = $('.item').index(this);
  totalClickedArray.push(index);
  var arraySize = totalClickedArray.length;
  console.log('last index:' + totalClickedArray[arraySize - 2],  ' new index:' + index);
});