如何将javascript应用于多个类？

我使用的是引导标签，里面有一个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.queryselectoral

  ，但它也不起作用

但它没有起作用

我不想使用复制函数，我想对使用类

.img paralax的每个元素使用一个

使用javascript函数的所有代码都是重复的：

html代码示例：

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

还有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);

函数scrollBanner（）{
var-pos；
var headerText=document.querySelector（'.img paralax'）；
scrollPos=window.scrollY；
如果（scrollPos您确实需要使用
querySelectorAll
，但应记住，它返回的
HTMLCollection
不是单个节点。例如，您可以使用
Array.prototype.forEach
来迭代匹配选择器的所有节点

函数scrollBanner（）{
var scrollPos=window.scrollY；
如果（scrollPos感谢您的建议，但是在函数中，我需要在哪里添加在选项卡更改时侦听的事件？我是Javascript新手，抱歉！很好！我可以使用单个选择器来应用效果吗？例如，仅使用.img paralax并将效果应用于具有该类的每个元素，而不是将其他类添加到查询选择器？
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);

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;

        }
    );
  }
}