Javascript 如何使用jQuery查找具有动态更新的'active'类且没有单击事件的元素？

我的网页上有一个物化css旋转木马。当转盘旋转到上一个/下一个链接时，焦点链接上的类将从

class=“carousel item active”

更改为

class=“carousel item”

我的目标是使用jQuery来识别新的

活动类

并显示与该图像相关的相应文本

我尝试过使用

.mousemove（）

事件侦听器，但没有效果

我通过将焦点图像的

itemid

记录到控制台来测试这一点。页面加载时，会记录正确的

itemid

。但是，当我向左或向右滚动旋转木马时，新的

itemid

不会记录，也不会发生任何事情

我还尝试过使用

hasClass（）

。我的困惑不在于如何识别或抓住元素。这是如何让选择器持续监听，以便当一个图像失去

活动

类，而另一个图像现在有

活动

类时，将显示相应的文本

以下是指向我正在引用的项目页面的链接：

以下是我的旋转木马的代码片段：

  <div class= "carousel" id="fs">
        <a class="carousel-item" href="https://butterflysocial.herokuapp.com/"><img src="../img/butterfly.jpg" itemid="1" class="responsive-img">
            <h6 class= "carouselTitle white-text">Butterfly Social</h6>
        </a>
        <a class="carousel-item" href="https://bleauwonder.github.io/renegades-of-silicon-alley/"><img src="../img/compass.jpg" itemid="2" class="responsive-img">
            <h6 class= "carouselTitle white-text">Renegade TrailBrews</h6>
        </a>
    </div>

---

单击旋转木马后，我可以观察到一个短暂的延迟，直到包含“活动”类的元素发生更改。我想象该类在旋转木马的滚动动画的指定转换之后应用。 （此处有一些相关信息：）

我看不到materialize为旋转木马滚动动画完成提供的事件侦听器，因此您可能需要创建自己的解决方案。您可以在“click”事件侦听器上使用setTimeout来检查哪个元素在过渡期后包含“active”类。（但setTimeout的计时不准确，因此请确保添加100ms左右的时间。）

或者，您可以使用requestAnimationFrame连续迭代，检查活动元素是否已更改，而无需侦听单击，也无需冻结页面的主线程

let activeElement = null

function activeElementChanged(newElement) {
    activeElement = newElement
    let itemId = newElement.find("img.responsive-img").attr("itemid")
    console.log("ID: ", itemId)
}

let activeElementListener = function () {
    let currentActiveElement = $("a.carousel-item.active")
    if(currentActiveElement !== activeElement) {
        activeElementChanged(currentActiveElement)
    }
    requestAnimationFrame(activeElementListener)
}

requestAnimationFrame(activeElementListener)

编辑： 我刚刚注意到，您可以使用Materialze API获取当前居中项的索引。这应该在单击后立即更新，不会有延迟。 我还修复了以前代码中的一些问题

let carouselElement = $(".carousel")
let carousel = M.Carousel.getInstance(carouselElement);
let numberOfItems = ...

$(".carousel").click(function( event ) {
    let itemIndex = carousel.center
    while(itemIndex < 0)
        itemIndex += numberOfItems
    while(itemIndex >= numberOfItems)
        itemIndex -= numberOfItems
    let itemId = itemIndex + 1
    console.log("ID: ", itemId)
}

let carouselement=$（“.carousel”）
让carousel=M.carousel.getInstance（carouselement）；
让numberOfItems=。。。
$（“.carousel”）。单击（函数（事件）{
let itemIndex=旋转木马中心
而（itemIndex<0）
itemIndex+=numberOfItems
while（itemIndex>=numberOfItems）
itemIndex-=numberOfItems
设itemId=itemIndex+1
日志（“ID:，itemId）
}

---

“中心”属性从零开始，不循环（向左滚动时为负，向右滚动时为正），因此您必须如上所示对其进行调整，以获取您要查找的itemId。

在您的网页上，当我单击某个项目时，旋转木马会发生变化。因此，当

活动的

类被切换时。因此，您可以将添加文本的代码放在同一位置（我假设它位于按钮单击处理程序中）。谢谢你这么快的回复。我已经实现了click处理程序，它现在似乎正在类中注册更改。但是，我仍然只在控制台上记录初始的

itemid

，它是1。我编辑了我的初始帖子以包含更新的jQuery。@KokodokoHeck是的！谢谢你，这很有效。我一直在尝试使用它我们已经解决了5个多小时了。终于找到了解决办法。非常感谢！@tomaato xyz只是一个跟进-你从哪里找到这些信息的？我已经编写了大约10个月的代码，非常擅长阅读文档，但我觉得我永远都不会明白这一点。这是经验造成的还是我对materialize不好？哈哈。Th又是anks！我肯定会建议这是一个通过大量实践来学习如何更好地学习的案例。在高压项目中工作真的教会了你如何快速熟悉库并写出问题。还要足智多谋。我充分利用console。登录各种对象以快速获得更好的心理图片我知道发生了什么事。

let activeElement = null

function activeElementChanged(newElement) {
    activeElement = newElement
    let itemId = newElement.find("img.responsive-img").attr("itemid")
    console.log("ID: ", itemId)
}

let activeElementListener = function () {
    let currentActiveElement = $("a.carousel-item.active")
    if(currentActiveElement !== activeElement) {
        activeElementChanged(currentActiveElement)
    }
    requestAnimationFrame(activeElementListener)
}

requestAnimationFrame(activeElementListener)

let carouselElement = $(".carousel")
let carousel = M.Carousel.getInstance(carouselElement);
let numberOfItems = ...

$(".carousel").click(function( event ) {
    let itemIndex = carousel.center
    while(itemIndex < 0)
        itemIndex += numberOfItems
    while(itemIndex >= numberOfItems)
        itemIndex -= numberOfItems
    let itemId = itemIndex + 1
    console.log("ID: ", itemId)
}