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

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

你的意思是这样的：&nbsp; &nbsp; var indexLast = '';&nbsp; &nbsp; $('.item').click(function() {&nbsp; &nbsp; &nbsp; var index = $('.item').index($(this));&nbsp; &nbsp; &nbsp; $('.result').text( 'current: ' + index + ', previous: ' + indexLast);&nbsp; &nbsp; &nbsp; indexLast = index&nbsp; &nbsp; });&nbsp; &nbsp; .wrap {&nbsp; &nbsp; &nbsp; display: flex;`enter code here`&nbsp; &nbsp; }&nbsp; &nbsp; .item {&nbsp; &nbsp; &nbsp; background-color: #2ecc71;&nbsp; &nbsp; &nbsp; width: 50px;&nbsp; &nbsp; &nbsp; height: 50px;&nbsp; &nbsp; &nbsp; margin: 0 10px;&nbsp; &nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; }&nbsp; &nbsp; .item:nth-child(even) {&nbsp; &nbsp; &nbsp; background-color: #3498db;&nbsp; &nbsp; }&nbsp; &nbsp; <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>&nbsp; &nbsp; <div class="wrap">&nbsp; &nbsp; &nbsp; <div class="item"></div>&nbsp; &nbsp; &nbsp; <div class="item"></div>&nbsp; &nbsp; &nbsp; <div class="item"></div>&nbsp; &nbsp; &nbsp; <div class="item"></div>&nbsp; &nbsp; &nbsp; <div class="item"></div>&nbsp; &nbsp; &nbsp; <div class="item"></div>&nbsp; &nbsp; &nbsp; <div class="item"></div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="result"></div>

Answer 2

作为存储在变量中的替代方法，您可以将一个类添加到您单击的那个类，然后在您下次单击时检查该类。$(".wrap>.item").click(function() {&nbsp; &nbsp; var last = $(this).siblings(".active").removeClass("active");&nbsp; &nbsp; $(this).addClass("active");&nbsp; &nbsp;// output last.text() / $(this).text() as needed});使用问题中指定的 OPs 按钮和 this.last index() ：$('.item').click(function() {&nbsp; var indexLast = $(".item.clicked").index();&nbsp; var index = $(this).index();&nbsp; $(this).addClass("clicked").siblings().removeClass("clicked");&nbsp; $('.result').text(index + ', ' + indexLast);});.wrap {&nbsp; display: flex;}.item {&nbsp; background-color: #2ecc71;&nbsp; width: 50px;&nbsp; height: 50px;&nbsp; margin: 0 10px;&nbsp; border-radius: 50%;&nbsp; cursor: pointer;}.item:nth-child(even) {&nbsp; background-color: #3498db;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="wrap">&nbsp; <div class="item"></div>&nbsp; <div class="item"></div>&nbsp; <div class="item"></div>&nbsp; <div class="item"></div>&nbsp; <div class="item"></div>&nbsp; <div class="item"></div>&nbsp; <div class="item"></div></div><div class="result"></div>使用 css 扩展它以显示 active/lastactive 给出：$(function() {&nbsp; $(".wrap>.item").click(function() {&nbsp; &nbsp; var last = $(this)&nbsp; &nbsp; &nbsp; .siblings()&nbsp; &nbsp; &nbsp; .removeClass("lastactive")&nbsp; &nbsp; &nbsp; .filter(".active")&nbsp; &nbsp; &nbsp; .removeClass("active")&nbsp; &nbsp; &nbsp; .addClass("lastactive");&nbsp; &nbsp; $(this).addClass("active");&nbsp; });});.item {&nbsp; border: 1px solid black;&nbsp; height: 20px;}.active {&nbsp; background-color: yellow;}.lastactive {&nbsp; background-color: #CCC;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="wrap">&nbsp; <div class="item"></div>&nbsp; <div class="item"></div>&nbsp; <div class="item"></div>&nbsp; <div class="item"></div>&nbsp; <div class="item"></div>&nbsp; <div class="item"></div>&nbsp; <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() {&nbsp; let index = $('.item').index(this),&nbsp; last_i = current_i;&nbsp; current_i = index;&nbsp; $('.result').text(current_i + ', ' + last_i);});.wrap {&nbsp; display: flex;}.item {&nbsp; background-color: #2ecc71;&nbsp; width: 50px;&nbsp; height: 50px;&nbsp; margin: 0 10px;&nbsp; border-radius: 50%;&nbsp; cursor: pointer;}.item:nth-child(even) {&nbsp; background-color: #3498db;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="wrap">&nbsp; <div class="item"></div>&nbsp; <div class="item"></div>&nbsp; <div class="item"></div>&nbsp; <div class="item"></div>&nbsp; <div class="item"></div>&nbsp; <div class="item"></div>&nbsp; <div class="item"></div></div><div class="result"></div>