Question

我正在尝试了解OOP JavaScript。我试图创建一个构造函数来调整HTML中存在的元素的高度。

在我的示例中，我有一个名为myDiv的div-我希望能够创建一个构造函数并将其附加到所需的任何元素上。我知道您可以通过创建自定义函数并将其附加到jQuery的$.fn上来使用jQuery，但是我只想使用普通JS来实现。

<div class="myDiv"></div>

.myDiv {
  width: 300px;
  height: 200px;
  background: red;
  transition: height 1s;
}

function ChangeHeight() {
  this.expand = function() {
   return $(this).css('height', '400px');
  }
  this.collapse = function() {
   return $(this).css('height', '0px');
  }
  console.log($(this).height());
}

var myDiv = $('.myDiv');

myDiv = new ChangeHeight();
div.collapse();
console.log('log: ' + myDiv);

我只是在测试一些东西，但是我认为我没有正确的方法。

Answer 1

一个类将提供您想要的功能：

class ChangeHeight {
  constructor(el) {
    this.el = el;
    console.log($(el).height());
  }

  expand() {
    $(this.el).css('height', '400px');
  }

  collapse() {
    $(this.el).css('height', '0px');
  }
}

var myDiv = $('.myDiv');

myDiv = new ChangeHeight(myDiv);
myDiv.collapse();

.myDiv {
  width: 300px;
  height: 200px;
  background: red;
  transition: height 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myDiv"></div>

Answer 2

在提出问题之前，您必须进行研究。无论如何。

function User(name) {
    this.name = name;
    this.isAdmin = false;
}

let user = new User("Jack");

alert(user.name); // Jack
alert(user.isAdmin); // false

选中https://javascript.info/constructor-new

如何将构造函数函数方法附加到元素？

2 个答案: