轮播的下一个和上一个按钮中的错误

Question

我创建了 2 个轮播。两者都是具有相同 .css 和 .js 文件的克隆，但问题是第一个轮播的下一个和上一个按钮工作正常，但第二个轮播的下一个和上一个按钮不工作。 为什么会发生这种情况。你能解决它吗？ 我还尝试通过重命名第二个轮播的类和 id，并为它制作另一个 css 文件和 js。但它再次不起作用。 请说你能做什么。 这是html文件

<div id="wrapper">
    <div id="carousel">
        <div id="content">
            <a href=""> <img class="item" src="images/b1.jpg" /></a>
            <a href=""> <img class="item" src="images/images (2).jpeg" /></a>
        </div>
    </div>
    <button id="prev">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path fill="none" d="M0 0h24v24H0V0z" />
            <path d="M15.61 7.41L14.2 6l-6 6 6 6 1.41-1.41L11.03 12l4.58-4.59z" />
        </svg>
    </button>
    <button id="next">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path fill="none" d="M0 0h24v24H0V0z" />
            <path d="M10.02 6L8.61 7.41 13.19 12l-4.58 4.59L10.02 18l6-6-6-6z" />
        </svg>
    </button>
</div>

<div id="wrapper">
    <div id="carousel">
        <div id="content">
            <a href=""> <img class="item" src="images/b1.jpg" /></a>
            <a href=""> <img class="item" src="images/images (2).jpeg" /></a>
        </div>
    </div>
    <button id="prev">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path fill="none" d="M0 0h24v24H0V0z" />
            <path d="M15.61 7.41L14.2 6l-6 6 6 6 1.41-1.41L11.03 12l4.58-4.59z" />
        </svg>
    </button>
    <button id="next">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path fill="none" d="M0 0h24v24H0V0z" />
            <path d="M10.02 6L8.61 7.41 13.19 12l-4.58 4.59L10.02 18l6-6-6-6z" />
        </svg>
    </button>
</div>

CSS

#wrapper {
  width: 100%;
  max-width: 964px;
  position: relative;
}

#carousel {
  overflow: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

#carousel::-webkit-scrollbar {
  height: 0;
}

#prev,
#next {
  display: flex;
  justify-content: center;
  align-content: center;
  background: white;
  border: none;
  padding: 8px;
  border-radius: 50%;
  outline: 0;
  cursor: pointer;
  position: absolute;
}

#prev {
  top: 50%;
  left: 0;
  transform: translate(50%, -50%);
  display: none;
}

#next {
  top: 50%;
  right: 0;
  transform: translate(-50%, -50%);
}

#content {
  display: grid;
  grid-gap: 16px;
  grid-auto-flow: column;
  margin: auto;
  box-sizing: border-box;
}

.item {
  width: 200px;
  height: 250px;
  background: green;
}

JavaScript

const gap = 16;
const carousel = document.getElementById("carousel"),
  content = document.getElementById("content"),
  next = document.getElementById("next"),
  prev = document.getElementById("prev");

next.addEventListener("click", e => {
  carousel.scrollBy(width + gap, 0);
  if (carousel.scrollWidth !== 0) {
    prev.style.display = "flex";
  }
  if (content.scrollWidth - width - gap <= carousel.scrollLeft + width) {
    next.style.display = "none";
  }
});
prev.addEventListener("click", e => {
  carousel.scrollBy(-(width + gap), 0);
  if (carousel.scrollLeft - width - gap <= 0) {
    prev.style.display = "none";
  }
  if (!content.scrollWidth - width - gap <= carousel.scrollLeft + width) {
    next.style.display = "flex";
  }
});

let width = carousel.offsetWidth;
window.addEventListener("resize", e => (width = carousel.offsetWidth));
              
           

这里第一个轮播是完美的，但秒下一个和上一个按钮不起作用..即使一切都一样。

Answer 1

正如 cmets 中所说，页面上的所有 id 都必须是唯一的，否则总是将第一个作为目标。要使其与多个按钮一起使用，您必须设置一个更灵活的系统。

您的 prev 和 next 按钮被包裹在一个 wrapper div 中，该 div 还包含 carousel 和 内容，所以你根本不需要任何 id。如果您知道单击了哪个按钮，则可以使用 javascript 的 DOM 函数定位它们。为此，有方便的event.target。

使用类来设置 div 的样式（注意所有的 id 都消失了）：

<div class="wrapper">
   <div class="carousel">
      <div class="content">
      ....
      </div>
   </div>
   <button class="prev">...</button>
   <button class="next">...</button>
</div>

要将事件侦听器绑定到两个（或更多！）next 按钮，然后使用queryselector 查找具有名为next 的类的所有元素。您可以使用它将事件侦听器绑定到所有 next 按钮：

var all_next = document.querySelectorAll(".next");
all_next.forEach( function(el){
    el.addEventListener( "click", function(event){
       //get the clicked button
       var clicked_element = e.target;
       // do something here
       .... 
    }
 })

从var clicked_element = e.target; 行，您现在可以准确地知道单击了哪个按钮，并计算出与之相关的包装器、轮播和容器：

//get the wrapper (is the parent of NEXT)
  var wrapper = clicked_element.parentNode;
//get the carousel (is first child of wrapper)
  var carousel = wrapper.children[0];
//get the content (is first child of carousel)
  var content = carousel.children[0];

现在您可以对所需元素施展魔法了。

对prev 按钮重复此操作。

一开始可能看起来有点工作，但你知道要灵活得多。如果 id 尚未使用，您可以添加额外的包装器而无需确定。

注意此答案可能有错别字。