javascript - 为什么我的代码会更改页面中的所有 p 标签？

Question

这段代码

var current = 0,
    slides = document.getElementsByTagName("p");

setInterval(function() {
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.opacity = 0;
  }
  current = (current != slides.length - 1) ? current + 1 : 0;
  slides[current].style.opacity = 1;
}, 1000);

p {
  position: absolute;
  transition: opacity .5s ease-in;
}

p + p { opacity: 0; }

<p>1</p>
<p>2</p>
<p>3</p>

是我要更改页面上的文本的内容。但是，当我添加 p 标签时

<p>1</p>
<p>2</p>
<p>3</p>

页面上的所有段落都将开始更改。我怎样才能专门针对这三个段落标签？

Answer 1

将 Ps 包装在容器中或给它们一个类并使用 querySelectorAll

https://jsfiddle.net/mplungjan/nb7pkqy5/

slides = document.querySelectorAll("#container p");

var current = 0,
  slides = document.querySelectorAll("#container p");

setInterval(function() {
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.opacity = 0;
  }
  current = (current != slides.length - 1) ? current + 1 : 0;
  slides[current].style.opacity = 1;
}, 1000);

#container p {
  position: absolute;
  transition: opacity .5s ease-in;
}

#container p+p {
  opacity: 0;
}

<p>Other paragraph</p>

<div id="container">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>