javascript - 如何将javascript应用于多个类？

Question

我正在使用 bootstrap 选项卡，在里面我有一个 div，其中有一个名为 img-parallax 的类和一个 h1 元素。之后我有一个 div 和一个名为 content 的类。

我所做的是在 img-parallax 类和 h1 上创建视差效果，并使用名为 ScrollBanner 的函数在其上方移动之后的内容。

问题是这种效果只对第一个标签起作用，如果我切换到第二个标签就不起作用了。 甚至使用 javascript 代码选择类。

我让它工作的唯一方法是复制执行视差效果的函数并使用另一个类，如 img-parallax2。

我已经试过了:

• 将类更改为 id。

• 在 javascript 函数中使用逗号选择多个类，如下所示:

  var headerText = document.querySelector('.img-paralax, .imgparalax2');

• 将 document.querySelector 更改为 document.querySelectorAll 但它也不起作用。

但没有成功。

我不想使用重复函数，我想为每个使用 .img-paralax 类的元素使用一个函数。

Here 是所有使用 javascript 函数的代码都被复制了:

示例 html 代码:

<div class="img-paralax">
  <h1>Sample Title</h1>
</div>
<div class="content">
 <p>Content Here</p>
</div>

CSS:

.img-paralax {
  background-image: url('https://placehold.it/1920x1080.png');
  background-size: cover;
  background-position: center;
  width: 100%;
  position: fixed;
  height: 500px;
}

.img-paralax h1 {
  text-align: center;
  color: #fff;
  text-shadow: 2px 2px 1px #000;
  font-family: 'Arial';
  letter-spacing: 20px;
  font-size: 50px;
  font-weight: 900;
  padding: 0;
  line-height: 452px;
  margin: 48px 0px 0px;
  text-transform: uppercase;
}
.content {
  position: relative;
  top: 500px;
  padding: 10px 20px;
  background: #fff;
  height: 1500px;
}

和 javascript:

function scrollBanner() {
  var scrollPos;
  var headerText = document.querySelector('.img-paralax');
  scrollPos = window.scrollY;

  if (scrollPos <= 400) {
      headerText.style.transform =  "translateY(" + (-scrollPos/3) +"px" + ")";
  }
}

window.addEventListener('scroll', scrollBanner);

function scrollBannerText() {
  var scrollPosText;
  var headerTextH1 = document.querySelector('.img-paralax h1');
  scrollPosText = window.scrollY;

  if (scrollPosText <= 400) {
      headerTextH1.style.transform =  "translateY(" + (-scrollPosText/3) +"px" + ")";
      headerTextH1.style.opacity = 1 - (scrollPosText/400);
  }
}

window.addEventListener('scroll', scrollBannerText);

Answer 1

您确实需要使用 querySelectorAll 但应该记住它返回 HTMLCollection 而不是单个节点。例如，您可以使用 Array.prototype.forEach 遍历匹配选择器的所有节点。 Demo .

function scrollBanner() {
  var scrollPos = window.scrollY;

  if (scrollPos <= 400) {
     [].forEach.call(
        document.querySelectorAll('.img-paralax, .img-paralax2'),
        function(node) {
          node.style.transform = "translateY(" + (-scrollPos/3) +"px" + ")";
        }
    );
  }
}

您实际上可以使用单个处理程序来完成这项工作

function scrollBanner() {
  var scrollPos = window.scrollY;

  if (scrollPos <= 400) {
     [].forEach.call(
        document.querySelectorAll('.img-paralax, .img-paralax2'),
        function(node) {
          node.style.transform = "translateY(" + (-scrollPos/3) +"px" + ")";

          var text = node.querySelector('h1');
          text.style.transform =  "translateY(" + (-scrollPos/3) +"px" + ")";
          text.style.opacity = 1 - scrollPos/400;

        }
    );
  }
}