开发者问题收集

我正在尝试在同一页面上添加第二个滑块，但它不起作用

2021-12-16
155
javascript

我试图在同一页面上添加第二个滑块，但它不起作用。 第一个滑块工作正常，但第二个滑块不起作用。我认为父元素方法有问题，但我无法理解。 

var ids = ["view_0", "view_1", "view_2", "view_3"]
let current_id = 0;

function next(productnr) {
  if (document.getElementById(ids[current_id]).parentElement.id == productnr) {
    let last_array_position = ids.length;
    document.getElementById(ids[current_id]).classList.remove("show");
    current_id++;
    if (current_id >= last_array_position) {
      current_id = 0;
    }
    document.getElementById(ids[current_id]).classList.add("show");
  }
}
#1 img {
  display: none;
}

#1 img.show {
  display: block;
}
<article id=1>
    <img class="show" id="view_0"></img>
    <img id="view_1"></img>
    <img id="view_2"></img>
    <img id="view_3"></img>
    <button><</button>
    <button onclick="next(1)">></button>
    <article id=2>
      <img class="show" id="view_0"></img>
      <img id="view_1"></img>
      <img id="view_2"></img>
      <img id="view_3"></img>
      <button><</button>
      <button onclick="next(2)">></button>
3个回答

您的代码不起作用的原因是您在 HTML 中对两个滑块使用了相同的 id 。这将始终更新前者，但永远不会通过您的 JavaScript 函数更改后者幻灯片。此外，您的代码存在一些问题，例如标签未正确关闭，没有 src 属性。看起来您需要多个数组来存储多个滑块的 ID，以及多个函数来处理上一个和下一个按钮。

这是一个常用函数，用于处理单个页面上的多个滑块的所有按钮，而无需任何数组： 

function next(productId, next) {
  var tags = document.getElementById(productId).getElementsByTagName("img");
  var index;
  for (let i = 0; i < tags.length; i++) {
    if (tags[i].className == "show") {
      index = i;
      break;
    }
  }
  tags[index].classList.remove("show")
  index = next ? (index + 1) : (index - 1);
  index = index == tags.length ? 0 : index == -1 ? tags.length - 1 : index;
  tags[index].classList.add("show")
}
img {
  display: none;
  width: 100px;
  height: 100px;
  object-fit: cover;
}

img.show {
  display: block;
}
<div id="product1">
  <img class="show" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" />
  <img src="https://images.ctfassets.net/hrltx12pl8hq/61DiwECVps74bWazF88Cy9/2cc9411d050b8ca50530cf97b3e51c96/Image_Cover.jpg?fit=fill&w=480&h=270" />
  <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80" />
  <img src="https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg" />
  <button onclick="next('product1', 0)">Prev</button>
  <button onclick="next('product1', 1)">Next</button>
</div>

<div id="product2">
  <img class="show" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" />
  <img src="https://images.ctfassets.net/hrltx12pl8hq/61DiwECVps74bWazF88Cy9/2cc9411d050b8ca50530cf97b3e51c96/Image_Cover.jpg?fit=fill&w=480&h=270" />
  <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80" />
  <img src="https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg" />
  <button onclick="next('product2', 0)">Prev</button>
  <button onclick="next('product2', 1)">Next</button>
</div>
Deepak
2021-12-17

id 属性定义一个标识符 (ID)，该标识符在整个文档中必须是唯一的， 在您的代码中，您对多个元素使用了相同的 ID，

Aditya
2021-12-17

对于您要执行的操作，我建议使用 querySelector 来选择 elements ，因为这将使我们能够在给定的 slider 下准确选择具有给定 id 的组件，因为 有多个具有相同 id 的元素（ 在这种重复情况下，建议的方法是使用 class 而不是 id ） 。

  • 我将 counter_id 作为每个滑块的 图像计数器 ，并以 id 作为滑块的键。
  • 在这里，我将 slider id 更新为 a1 和 a2 ，以便更好地理解。
  • #${productnr}>.show#${ids[current_id[productnr]] => 选择 id a1 (或 a2) 元素下的 class .show 和 id #view_0 (或根据滑块的 counter_id 依次类推) 元素，即滑块元素。
  • 我们对元素执行添加和删除类操作。 
var ids = ["view_0", "view_1", "view_2", "view_3"]
let current_id = {
  a1: 0,
  a2: 0
}; //image counter for each slider having the id as the key of slider

function next(productnr) {
  let last_array_position = ids.length;
  let pic = document.querySelector(`#${productnr}>.show#${ids[current_id[productnr]]}`);
  pic.classList.remove("show");
  current_id[productnr]++;
  if (current_id[productnr] >= last_array_position) {
    current_id[productnr] = 0;
  }
  document.querySelector(`#${productnr}>#${ids[current_id[productnr]]}`).classList.add("show");
}

function prev(productnr) {
  let last_array_position = ids.length;
  let pic = document.querySelector(`#${productnr}>.show#${ids[current_id[productnr]]}`);
  pic.classList.remove("show");
  current_id[productnr]--;
  if (current_id[productnr] < 0) {
    current_id[productnr] = last_array_position - 1;
  }
  document.querySelector(`#${productnr}>#${ids[current_id[productnr]]}`).classList.add("show");
}
#a1 img {
  display: none;
}

#a1 img.show {
  display: block;
}
<article id="a1">
  <img src="https://picsum.photos/id/1/200" class="show" id="view_0"></img>
  <img src="https://picsum.photos/id/2/200" id="view_1"></img>
  <img src="https://picsum.photos/id/3/200" id="view_2"></img>
  <img src="https://picsum.photos/id/4/200" id="view_3"></img>
  <button onclick="prev(`a1`)"><</button>
  <button onclick="next(`a1`)">></button>
  <article id="a2">
    <img src="https://picsum.photos/id/50/200" class="show" id="view_0"></img>
    <img src="https://picsum.photos/id/60/200" id="view_1"></img>
    <img src="https://picsum.photos/id/70/200" id="view_2"></img>
    <img src="https://picsum.photos/id/80/200" id="view_3"></img>
    <button onclick="prev(`a2`)"><</button>
    <button onclick="next(`a2`)">></button>
  </article>
</article>
Himanshu Singh
2021-12-17