类问题中的方法无法更新所有对象，只有一个受影响

如何解决类问题中的方法无法更新所有对象，只有一个受影响

在这段代码中，我想对某些元素进行视差效果，但是无论我做什么，只有其中一个元素在移动，我不知道问题出在哪里：/

我尝试了各种不同的操作，但是不管最后创建了多少个obj，都只有最后一个表单数组（ParaElements）在移动。

function ParaElement(x,y,z,id) {
  this.x = x;
  this.y = y;
  this.z = z;
  this.id = id;

  document.getElementById("paralax").innerHTML +=
    '<div class="para-elmt"> </div>';

  this.htmlObj = document.getElementsByClassName("para-elmt")[id];

  this.positionChange = function (tx,ty) {
    this.htmlObj.style.top = String(tx) + "px";
    this.htmlObj.style.left = String(ty) + "px";
    this.htmlObj.style.zIndex = this.z;
  };

  this.positionChange(this.x,this.y);

  this.scrollHandler = function () {
    let scrollPosition = document.documentElement.scrollTop;
    let tx = this.x - scrollPosition / this.z;
    let ty = this.y;
    this.positionChange(tx,ty);
  };
}

var ParaElements = [];
ParaElements.push(new ParaElement("30","100","25","0"));
ParaElements.push(new ParaElement("100","300","50","1"));
ParaElements.push(new ParaElement("200","200","10","2"));

$(document).on("scroll",function () {
  for (let i = 0; i < ParaElements.length; i++) {
    ParaElements[i].scrollHandler();
  }
});

body {
  min-height: 2000px;
}
#paralax {
  width: 100%;
  height: 100%;
  position: fixed;
  margin: 0;
}
#paralax .para-elmt {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-color: teal;
  z-index: 9999;
}

    <html>
    <body>
      <div id="paralax">

      </div>
          <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    </body>

解决方法

每次启动ParaElement时，使用innerHTML都将破坏以前用于抓取元素的选择器。这就是为什么只有最后一个在移动。这样的事情应该可以解决问题。

function ParaElement(x,y,z,id) {
  this.x = x;
  this.y = y;
  this.z = z;
  this.id = id;

  this.htmlObj = document.getElementsByClassName("para-elmt")[this.id];

  this.positionChange = function (tx,ty) {
    this.htmlObj.style.top = String(tx) + "px";
    this.htmlObj.style.left = String(ty) + "px";
    this.htmlObj.style.zIndex = this.z;
  };

  this.positionChange(this.x,this.y);

  this.scrollHandler = function () {
    let scrollPosition = document.documentElement.scrollTop;

    let tx = this.x - scrollPosition / this.z;
    let ty = this.y;
    this.positionChange(tx,ty);
  };
}

// Let's define the number of element we want,by creating an array with the differents parameters.
// I removed the last parameter from the arrays because it can be added directly when we will loop over the arrays.
let paraElementsParams = [["30","100","25"],["100","300","50"],["200","200","10"]]

var ParaElements = [];
// Instead of initializing by hand,let's loop over the elements in our parameters array so we can first create all the dom elements
for (let i = 0; i < paraElementsParams.length; i++) {
  document.getElementById("paralax").innerHTML += '<div class="para-elmt"> </div>';
}
// Then,let's loop again so we can initialize our elements without losing the node references.
for (let i = 0; i < paraElementsParams.length; i++) {
  // we add i at the end of the initialization using the current loop index
  ParaElements.push(new ParaElement(...paraElementsParams[i],i));
}

$(document).on("scroll",function () {
  for (let i = 0; i < ParaElements.length; i++) {
    ParaElements[i].scrollHandler(); 
  }
});