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
不确定它的含义或相关性。
我究竟做错了什么 ???
你需要存储div的jQuery版本:
this.mainDiv = $(this.mainDiv).addClass("puzzle");
否则,将类添加到下一行中丢弃的内容中。
考虑到什么是discussed here:
var $div = $("<div>", {id: "foo", "class": "a"});
和Mark Badges的评论:
将美元符号添加到包含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>