Question

我正在尝试使用纯javaScript为手风琴制作一个构造函数但是它已经工作了......我猜它与＆＃34;这个＆＃34;关键字行为不端..我已经用正常的函数编写了代码，它确实有效，但是它与下面的构造函数有关。

＆＃13;

function Accordion(accordionId) {
  this.container = document.getElementById(accordionId);
  this.headers = this.container.getElementsByClassName("accordion-header");
  this.sections = this.container.getElementsByClassName("accordion-section");
  for (var i = 0; i < this.headers.length; i++) {
    this.headers[i].addEventListener("click", this.toggleSections);

  }
  this.toggleSections = function() {
    var toggeld = this.nextElementSibling.className;
    for (var i = 0; i < this.sections.length; i++) {
      this.sections[i].className = "accordion-section";
    }
    if (toggeld === "accordion-section") {
      this.nextElementSibling.className = "accordion-section-displayed";
    } else {
      this.nextElementSibling.className = "accordion-section";
    }
  }
}
 var newAccordion = new Accordion("accordion-wrapper");

＆＃13;

<div id="accordion-wrapper">
  <h3 class="accordion-header">First Section</h3>
  <div class="accordion-section">
    .
  </div>
  <h3 class="accordion-header">Second Section</h3>
  <div class="accordion-section">

  </div>
  <h3 class="accordion-header">Third Section</h3>
  <div class="accordion-section">

  </div>

</div>

＆＃13;

Answer 1

我在这里看到了一些错误。

在定义this.toggleSections之前，您将点击处理程序设置为this.toggleSections。您应该在设置点击处理程序之前定义它。
点击处理程序中的this上下文将是被点击的元素，而不是您的Accordion实例。有一些方法可以解决这个问题。您可以在点击处理程序之外设置另一个变量self等于this，并在点击处理程序中更改this.sections到self.sections（以及您需要的任何其他实例变量）。不过，我首选的方法是将bind改为您的点击处理程序：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
如果您决定沿着bind大道走下去，则必须更新this.nextElementSibling引用，因为this上下文不再是点击的元素。您可以通过向点击处理程序添加event参数来获取点击的元素，并引用event.target而不是this。

如何用纯JavaScript制作手风琴构造函数？

1 个答案: