首頁(yè) 猿問我怎樣才能得到以前的索引？

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

JavaScript

幕布斯7119047 2021-11-25 16:09:13

我有一個(gè)點(diǎn)擊任務(wù)來(lái)獲取一個(gè)項(xiàng)目的當(dāng)前和上一個(gè)索引。$('.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>示例：我們點(diǎn)擊了 3。然后點(diǎn)擊了 6。我需要得到。索引 == 6，lastIndex == 3。

查看完整描述

3 回答

梵蒂岡之花

TA貢獻(xiàn)1900條經(jīng)驗(yàn) 獲得超5個(gè)贊

你的意思是這樣的：

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;

}

</div>

反對(duì) 回復(fù) 2021-11-25

白豬掌柜的

TA貢獻(xiàn)1893條經(jīng)驗(yàn) 獲得超10個(gè)贊

作為存儲(chǔ)在變量中的替代方法，您可以將一個(gè)類添加到您單擊的那個(gè)類，然后在您下次單擊時(shí)檢查該類。

$(".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;

}

</div>

使用 css 擴(kuò)展它以顯示 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;

}

</div>

反對(duì) 回復(fù) 2021-11-25

心有法竹

TA貢獻(xiàn)1866條經(jīng)驗(yàn) 獲得超5個(gè)贊

'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;

}

</div>

反對(duì) 回復(fù) 2021-11-25

3 回答
0 關(guān)注
153 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

我怎樣才能得到以前的索引？

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

3 回答

添加回答

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

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