我怎样才能得到以前的索引？

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。我需要得到。索引 == 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 index() ：

$('.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>

使用 css 扩展它以显示 active/lastactive 给出：

$(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>