来自javascript的动态html内容(使用jquery方法)

问题描述 投票:0回答:1

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

不确定它的含义或相关性。

我究竟做错了什么 ???

javascript jquery html
1个回答
2
投票

你需要存储div的jQuery版本:

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

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

考虑到什么是discussed here

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

和Mark Ba​​dges的评论:

将美元符号添加到包含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>
© www.soinside.com 2019 - 2024. All rights reserved.