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>

最后，添加转换，过渡，溢出和索引检查，并且滑块已准备就绪。

定位到col类内的下一个图像

2 个答案: