为什么我的代码会更改页面中的所有 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 包裹在容器中或给它们一个 class 并使用 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>

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

Why does my code change ALL the p tags in my page?

javascript

text

rotator