無法正確獲取活動類的索引號
[英]Not able to Get the Index Number of Active Class Properly
問題描述
你能看看這個演示，讓我知道為什么我無法正確獲取.carousel-item.active的當前索引號嗎？
正如您在顯示第二張幻燈片時所看到的，我仍在獲取第一張幻燈片的索引，依此類推。
var totalItems = $('.carousel-item').length; var currentIndex = $('.carousel-item.active').index() + 1; var myCarousel = document.getElementById('carouselExampleIndicators') myCarousel.addEventListener('slide.bs.carousel', function() { currentIndex = $('.carousel-item.active').index() + 1; $('#slide').text('' + currentIndex + ' / ' + totalItems + ''); });
.carousel-item img { max-height: 200px !important; } .carousel-indicators{ top:16px !important; }
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <div class="container"> <button type="button" class="btn btn-warning"><span id="slide">1 / 3</span></button> <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://placeimg.com/300/280/tech" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://placeimg.com/300/280/people" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://placeimg.com/300/280/Place" class="d-block w-100" alt="..."> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script> </body> </html>
1 個解決方案
解決方案1
2 已采納 2021-10-28 18:43:29
對於您的活動，請嘗試使用'slid.bs.carousel'而不是'slide.bs.carousel' 。 slide火災立即同時slid的過渡之后激發的做
var totalItems = $('.carousel-item').length; var currentIndex = $('.carousel-item.active').index() + 1; var myCarousel = document.getElementById('carouselExampleIndicators') myCarousel.addEventListener('slid.bs.carousel', function() { currentIndex = $('.carousel-item.active').index() + 1; $('#slide').text('' + currentIndex + ' / ' + totalItems + ''); });
.carousel-item img { max-height: 200px !important; } .carousel-indicators { top: 16px !important; }
<!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <div class="container"> <button type="button" class="btn btn-warning"><span id="slide">1 / 3</span></button> <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://placeimg.com/300/280/tech" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://placeimg.com/300/280/people" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://placeimg.com/300/280/Place" class="d-block w-100" alt="..."> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
如何在 Extjs 的卡片布局上獲取當前活動項目的索引號（而不是活動項目的 ID）？
[英]How to get currently active item`s index number (and not active item`s id) on a card layout on Extjs?
如何使用jQuery獲取特定類的元素的索引，位置數
[英]How to get index, position number of element with certain class with jQuery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.