时间戳

首页 > 解决方案 > 类中的方法问题（不能更新所有对象，只有一个受影响）

javascript - 类中的方法问题（不能更新所有对象，只有一个受影响）

问题描述

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

我尝试了不同的东西，但无论制作了多少个 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>

标签： javascripthtmlarraysobject

解决方案

通过在每次启动 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(); 
  }
});

推荐阅读