来自 javascript 的动态 html 内容（使用 jquery 方法）

Question

jquery 在我的 js 代码之前加载到我的 html 中。 然后在我的puzzle.js 中有：

class Puzzle {
  constructor(ID, Name, Status) {
    this.ID = "main" + ID;
    this.Name = Name;
    this.Status = Status;
    this.mainDiv = "";
  }

  generateDiv() {
    this.mainDiv = '<div id="' + this.ID + '"/>';
    $(this.mainDiv).addClass("puzzle");
  }
}

$(document).ready(function() {
  var puzzle = new Puzzle(1, "MyPuzzle", 1);
  puzzle.generateDiv();
  $("#Puzzles").append(puzzle.mainDiv);
})

.puzzle {
  width: 200px;
  height: 200px;
  background: black;
  border 1px solid white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Puzzles"></div>

并且 div 添加了漂亮的 ID 字段，但类没有。事实上，我对 div "jquery-style" 所做的任何事情都没有做任何事情（但也没有控制台错误）

我注意到在检查器（chrome）中，div 显示为

<div id="main1"></div> == $0

不确定它的含义或是否相关。

我做错了什么？？？

Answer 1

你需要存储 jQuery 版本的 div：

this.mainDiv = $(this.mainDiv).addClass("puzzle");

否则，您将该类添加到下一行中丢弃的内容中。

考虑什么是discussed here：

var $div = $("<div>", {id: "foo", "class": "a"});

Mark Ba​​ijens 的评论：

在包含 jQuery 对象的变量前面添加一个美元符号是很常见的

您可以执行以下操作：

class Puzzle {
  constructor(ID, Name, Status) {
    this.ID = "main" + ID;
    this.Name = Name;
    this.Status = Status;
    this.$mainDiv = null;
  }

  generateDiv() {
    this.$mainDiv = $("<div>", {id: this.ID, "class": "puzzle"});
  }
}

$(document).ready(function() {
  var puzzle = new Puzzle(1, "MyPuzzle", 1);
  puzzle.generateDiv();
  $("#Puzzles").append(puzzle.$mainDiv);
})

.puzzle {
  width: 200px;
  height: 200px;
  background: black;
  border 1px solid white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Puzzles"></div>