单击按钮后抓取活动元素

Question

我在具有以下结构的页面上有轮播：

<div class="my-controls">
  <button class="button123">
    <span class="abc">Next-image</span>
  </button>
</div>

<div class="my-carousel">                        
  <div class="item active">image1</div>                       
  <div class="item">image2</div>
  <div class="item">image3</div>
</div>

点击时同一页面上有一个按钮，我需要抓取 active 元素。

我尝试过这样的事情，但我看到的问题是在触发按钮事件后添加/更改了活动类，因此它没有给我预期的 div 元素：

$( document ).ready(function() {
$(".button123").click(function(){
    var activeElement = $(".my-carousel .active")
    //do something with activeElement
});
});

请告诉我如何在活动元素更改后获取它。

Answer 1

如果我理解正确，您希望在活动类位于该元素上之前访问新的活动元素。因此，您想弄清楚活动类将在哪个元素上。

答案取决于轮播。如果它只是以一种方式遍历所有项目，而不循环，则可以使用 jQuery 的 .next() 方法“保持领先”：

$( document ).ready(function() {
  $(".button123").click(function(){

    if ($(".my-carousel .active").next().length) {
      // There is a next item, set activeElement to it
      var activeElement = $(".my-carousel .active").next()
    }

    // Do something with activeElement
  });
});

如果轮播循环，您可以添加一个else 语句，如果没有.next() 子项，则将轮播重置为第一项：

$( document ).ready(function() {
  $(".button123").click(function(){

    if ($(".my-carousel .active").next().length) {
      // There is a next item, set activeElement to it
      var activeElement = $(".my-carousel .active").next()
    } else {
      // There is no next item, start from the beginning
      var activeElement = $(".my-carousel .active").siblings(":first-child")
    }

    // Do something with activeElement
  });
});

如果轮播也可以双向移动，则您必须连接另一个按钮，即向后滚动的按钮。复制点击函数，将.next()替换为.prev()就可以了！

这是一个用于双向循环和移动的轮播的 CodePen：https://codepen.io/PXJesse/pen/YzwzgQR