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

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

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

 $(".wrap{amp}gt;.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); }); и $('.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; } 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div class="wrap"{amp}gt; {amp}lt;div class="item"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="item"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="item"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="item"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="item"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="item"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="item"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="result"{amp}gt;{amp}lt;/div{amp}gt; 

Расширение этого, чтобы показать active / lastactive, используя css, дает:

 $(function() { $(".wrap{amp}gt;.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; } 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div class="wrap"{amp}gt; {amp}lt;div class="item"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="item"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="item"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="item"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="item"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="item"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="item"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="result"{amp}gt;{amp}lt;/div{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector