时间戳

首页 > 解决方案 > 如何在多个轮播中定位活动项目的第一个孩子

jquery - 如何在多个轮播中定位活动项目的第一个孩子

问题描述

我有一个多个轮播，一次滑动一个项目。我正在克隆我的轮播项目。现在我想添加在活动班级的第一个孩子中选择的班级。

我正在使用https://www.bootply.com/HNtK6pWwFp#，但已经将其转换为 bootstrap 4。

我试过了

  $('.carousel-control-next-icon').click(function () {
     alert("next icon clicked");
   $(".carousel-item.active.children(:first-child)").addClass('selected');
  });

并尝试与dom一起玩，但没有取得任何成功。

选定的类有边框样式。我添加了第一个项目的选定类。后来我使用 removeClass 和 addClass。如果需要更多信息，我很乐意加载更多代码。

标签： jquerybootstrap-4

解决方案

slid而不是使用单击事件，而是使用适当的选择器使用Carousel事件。

$('.carousel').on('slid.bs.carousel', function () {
    $(".carousel-item.active div:first-child").addClass('selected');
});

https://www.codeply.com/go/NYPTgKPjng

而且，你真的不需要 jQuery 来添加一个类。您可以只使用 CSS 选择器，例如：

.carousel-item.active div:first-child {
    border: blue solid 1px;
}

推荐阅读