javascript - 来自 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

您需要存储 div 的 jQuery 版本:

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

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

考虑到 discussed here :

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

马克·拜金斯 (Mark Ba​​ijens) 的评论:

It's common to prepend a dollar sign to variables that contain jQuery objects

您可以执行以下操作:

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>