开发者问题收集

我想在同一页面上有多个滑块

2021-12-16
80
javascript html

这就是我尝试做的，我希望程序获取产品编号，然后选择正确的文章显示，第一个方法可以正常工作，但第二个方法不行，我认为我需要另一种实现方式，而不是使用父元素。 

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

function next(product) {
 var parent =document.getElementById(ids[current_id]).parentElement.id;
  if(product==parent){
  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");
}
}

<style>
  #1 img {
  display: none;
}

#1 img.show {
  display: block;
}
</style>

<!DOCTYPE html>
<html>

<head>
  <title>Multiple Slider</title>
</head>

<body>

  <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>
    <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>



  </article>

</body>

出现错误：

Uncaught TypeError: Cannot read properties of null (reading 'classList') 

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

function next() {
  let last_array_position = ids.lastIndexOf;
  document.getElementById(ids[current_id]).classList.remove("show");
  current_id = current_id + 1;
  document.getElementById(ids[current_id]).classList.add("show");
  if (current_id < last_array_position) {
    current_id = 0;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Multiple Slider</title>
</head>

<body>

  <div id="product1">
    <p class="show" id="view_0">1</p>
    <p id="view_1">2</p>
    <p id="view_2">3</p>
    <p id="view_3">4</p>
    <button><</button>
    <button onclick="next()">></button>
  </div>

</body>
2个回答

数组的长度位于 length 属性中，而不是 lastIndexOf （这是用于搜索值最后一次出现的方法）。

在尝试使用该元素之前，您需要检查索引是否超出该值。

您的 if 语句也有错误的条件，应该是 >= ，而不是 < 。 

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

function next() {
  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");
}

#product1 p {
  display: none;
}

#product1 p.show {
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <title>Multiple Slider</title>
</head>

<body>

  <div id="product1">
    <p class="show" id="view_0">1</p>
    <p id="view_1">2</p>
    <p id="view_2">3</p>
    <p id="view_3">4</p>
    <button><</button>
    <button onclick="next()">></button>
  </div>

</body>
Barmar
2021-12-16

您正尝试访问超出范围的元素，因为条件检查稍后发生。您需要在访问 classList 并向其添加 show 之前检查条件。此外，您可以将 last_array_position = ids.length 保留在函数之外，因为这不会改变。

以下是针对页面中多个滑块部分的更简单的解决方案： 

function next(productId) {
  var tags = document.getElementById(productId).getElementsByTagName("p");
  var index;
  for (let i = 0; i < tags.length; i++) {
    if (tags[i].className == "show") {
      index = i;
      break;
    }
  }
  tags[index].classList.remove("show")
  index = (index + 1) == tags.length ? 0 : index + 1;
  tags[index].classList.add("show")
}

p {
  display: none;
}

p.show {
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <title>Multiple Slider</title>
</head>

<body>

  <div id="product1">
    <p class="show" id="view_1_0">1</p>
    <p id="view_1_1">2</p>
    <p id="view_1_2">3</p>
    <p id="view_1_3">4</p>
    <button><</button>
    <button onclick="next('product1')">></button>
  </div>

  <div id="product2">
    <p class="show" id="view_2_0">1</p>
    <p id="view_2_1">2</p>
    <p id="view_2_2">3</p>
    <p id="view_2_3">4</p>
    <button><</button>
    <button onclick="next('product2')">></button>
  </div>

</body>
Deepak
2021-12-16