Javascript 如何检查单击的元素是在当前活动元素之前还是之后

我有一个列表项，第一个已经有了

.active

类

当我单击其他列表项时，

.active

类将移动到单击的元素

但问题是，我无法检测我在上一个

.active

元素之前还是之后单击的项目

这是剧本

$（文档）.ready（函数（）{
var$li=$（“li”）；
$li.每个（函数（）{
$（此）。单击（函数（）{
$li.removeClass（“活动”）；
$（此）.addClass（“活动”）；
if（$（.li.active”）.next（$（this）））{
$（“span”）.text（“单击元素后”）；
}否则{
$（“span”）.text（“单击元素之前”）；
}
})
})
})

li.active{
背景：红色；
}

检查1
支票2
支票3
支票4

要实现这一点，您可以检查

if

语句中相关元素的

索引（）。还要注意，
each（）
语句是多余的。试试这个：


$（文档）.ready（函数（）{
$（“li”）。单击（函数（）{
var activeIndex=$（'li.active'）.removeClass（'active'）.index（）；
var thisIndex=$（this.addClass（'active'）.index（）；
如果（activeIndexthisIndex）{
$（“span”）.text（“活动元素之前”）；
}否则{
$（'span'）.text（'same element'）；
}
})
})
li.active{
背景：红色；
}


检查1
支票2
支票3
支票4

要实现这一点，您可以检查
if
语句中相关元素的
索引（）。还要注意，
each（）
语句是多余的。试试这个：


$（文档）.ready（函数（）{
$（“li”）。单击（函数（）{
var activeIndex=$（'li.active'）.removeClass（'active'）.index（）；
var thisIndex=$（this.addClass（'active'）.index（）；
如果（activeIndexthisIndex）{
$（“span”）.text（“活动元素之前”）；
}否则{
$（'span'）.text（'same element'）；
}
})
})
li.active{
背景：红色；
}


检查1
支票2
支票3
支票4

您可以保存最近单击的元素的
索引
，并将其与上一个进行比较


$（文档）.ready（函数（）{
var指数=0；
$（'li'）。单击（函数（）{
$（'li'）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
var res=$（“li.active”）.index（）>index'：$（“li.active”）.index（）==index？'same'：'before'；
index=$（this.index（）；
控制台日志（res）；
})
})
li.active{
背景：红色；
}


检查1
支票2
支票3
支票4

您可以保存最近单击的元素的
索引
，并将其与上一个进行比较


$（文档）.ready（函数（）{
var指数=0；
$（'li'）。单击（函数（）{
$（'li'）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
var res=$（“li.active”）.index（）>index'：$（“li.active”）.index（）==index？'same'：'before'；
index=$（this.index（）；
控制台日志（res）；
})
})
li.active{
背景：红色；
}


检查1
支票2
支票3
支票4

如果理解正确，您可以尝试使用索引，这将解决问题：-


$（文档）.ready（函数（）{
var$li=$（“li”）；
$li.每个（函数（）{
$（此）。单击（函数（）{
如果（$（（.li.active”）.index（）您可以尝试使用index，如果您理解正确，这将解决问题：-


$（文档）.ready（函数（）{
var$li=$（“li”）；
$li.每个（函数（）{
$（此）。单击（函数（）{
如果（$（（.li.active”）.index（）只保存活动元素的id、子索引或任何其他标识符，这样您就不必每次循环所有列表项，因为您都知道当前活动项和刚刚单击的项。（因此，将能够比较索引）如果只保存活动元素的id、子索引或任何其他标识符，那么您就不必每次都遍历所有列表项，因为您都知道当前活动项和刚刚单击的活动项。（因此，将能够比较索引）