定位 col 类中的下一个图像

Question

<div class="container bg-custom-blue">
  <h2 class="text-center pt-5 pb-4">The Responsive Gallery</h2>
  <div class="row">
    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/waiter.jpg" alt="Waiter serving food">
    </div>
    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/romantic.jpg" alt="A couple enjoying a romantic dinner at our restaurant">
    </div>
    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/nibbles.jpg" alt="Tasty nibbles to share">
    </div>


    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/pasta-rucola-salad.jpg" alt="Fresh pasta with rucola">
    </div>
    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/fish.jpg" alt="Fresh fillet of fish">
    </div>
    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/fish.jpg" alt="One of our large selection of cakes we serve">
    </div>

    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/chill.jpg" alt="Friends enjoying wine">
    </div>
    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/beef.jpg" alt="Argentinian beef fillet">
    </div>
    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/nibbles.jpg" alt="Waiter serving food">
    </div>

我正在尝试构建一个带有箭头的图片库，以便您可以按下下一个箭头并显示下一个图片（就像所有基本滑块一样）。因为我刚刚学习了一些引导程序的基础知识，所以我决定在这个项目中使用引导程序，但是，我不得不将每个图像放在一个单独的 col 类中（如果这不是一个好方法，请通知我）。因为当我在事件监听器中使用this.nextElementSibling 时，每个图像都嵌套在另一个col 类中，所以我得到null 作为返回。请问有什么方法可以定位下一张图片吗？

Answer 1

您可以为此使用 jQuery，因为您已经将它用于引导程序

$(this).parent().siblings().find("img")  

你可以使用Javascript也可以关注

this.parentElement.nextElementSibling.children[0];

children[0] 表示第一个子元素

Answer 2

您可以使用document.querySelectorAll 并通过索引访问您的节点。

小例子

const items = document.querySelectorAll('.row .col-12'); // all .col-12 notes inside .row
let currentIndex = 0; // current item index

// refresh icons and set border color
const refreshItems = () => {
  items.forEach((item, index) => {
    item.style.border = `1px solid ${index === currentIndex ? '#f00' : '#0f0'}`;
  });
}

// init
refreshItems();

// simple call by index
// items[5].style.border = '1px solid #0f0';

// Add click event to .prev button and increase current index 1
document.querySelector('.next').addEventListener('click', () => {
  currentIndex += 1;
  refreshItems();
});

// Add event to .prev button and decrease current index by 1
document.querySelector('.prev').addEventListener('click', () => {
  currentIndex -= 1;
  refreshItems();
})

<button class="next">next</button>
<button class="prev">prev</button>
<div class="container bg-custom-blue">
  <h2 class="text-center pt-5 pb-4">The Responsive Gallery</h2>
  <div class="row">
    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/waiter.jpg" alt="Waiter serving food">
    </div>
    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/romantic.jpg" alt="A couple enjoying a romantic dinner at our restaurant">
    </div>
    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/nibbles.jpg" alt="Tasty nibbles to share">
    </div>


    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/pasta-rucola-salad.jpg" alt="Fresh pasta with rucola">
    </div>
    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/fish.jpg" alt="Fresh fillet of fish">
    </div>
    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/fish.jpg" alt="One of our large selection of cakes we serve">
    </div>

    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/chill.jpg" alt="Friends enjoying wine">
    </div>
    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/beef.jpg" alt="Argentinian beef fillet">
    </div>
    <div class="col-12 col-md-6 col-xl-4 p-2">
      <img class="img-fluid" src="images/nibbles.jpg" alt="Waiter serving food">
    </div>
  </div>
</div>

最后，添加变换、过渡、溢出和索引检查，你的滑块就准备好了。