-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathobject.html
More file actions
71 lines (68 loc) · 3.31 KB
/
object.html
File metadata and controls
71 lines (68 loc) · 3.31 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Week Work</h1>
<h2>這是一個物件導向的範例</h2>
<ul id="worklist">
</ul>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// TODO: 引用 jquery npm cdn
// 建立一個 work 物件 ， 屬性包含 title ,workday , worktype , 方法包含 done() , fail()
// 建立一個 array 物件，包含 本週的 work 物件，從 2024-05-19 到 2024-05-25 ，
// 週一到週五的 worktype 為 workday，週六日 worktype 為 rest
// 將 array 的 work 物件轉換成 html list，並加入到 id = worklist 的 ul 中
// <li> 的內容為 worktype + title + workday 以及 done 與 fail 的按鈕
// done() 將 title 加入刪除線，fail() 將 title 變紅色
// 1. 建立 work 物件
let work = function(title, workday, worktype) {
this.title = title;
this.workday = workday;
this.worktype = worktype;
};
work.prototype.done = function() {
this.title = "<s>" + this.title + "</s>";
};
work.prototype.fail = function() {
this.title = "<span style='color:red'>" + this.title + "</span>";
};
// 2. 建立 array 物件
let worklist = [];
let workdays = ["2024-05-19", "2024-05-20", "2024-05-21", "2024-05-22", "2024-05-23", "2024-05-24", "2024-05-25"];
let worktypes = ["workday", "workday", "workday", "workday", "workday", "rest", "rest"];
let titles = ["工作1", "工作2", "工作3", "工作4", "工作5", "休息1", "休息2"];
for (let i = 0; i < workdays.length; i++) {
worklist.push(new work(titles[i], workdays[i], worktypes[i]));
}
// 3. 將 array 的 work 物件轉換成 html list
let worklistHTML = "";
for (let i = 0; i < worklist.length; i++) {
worklistHTML += "<li>" + worklist[i].worktype + " " + worklist[i].title + " " + worklist[i].workday +
"<button class='done' id='done" + i + "'>done</button>" +
"<button class='fail' id='fail" + i + "'>fail</button></li>";
}
// 4. 加入到 id = worklist 的 ul 中
$("#worklist").append(worklistHTML);
// 5. done() 將 title 加入刪除線，fail() 將 title 變紅色
$(".done").click(function() {
let index = $(this).attr("id").substring(4);
worklist[index].done();
$(this).parent().html(worklist[index].worktype + " " + worklist[index].title + " " + worklist[index].workday +
"<button class='done' id='done" + index + "'>done</button>" +
"<button class='fail' id='fail" + index + "'>fail</button>");
});
$(".fail").click(function() {
let index = $(this).attr("id").substring(4);
worklist[index].fail();
$(this).parent().html(worklist[index].worktype + " " + worklist[index].title + " " + worklist[index].workday +
"<button class='done' id='done" + index + "'>done</button>" +
"<button class='fail' id='fail" + index + "'>fail</button>");
});
</script>
</body>
</html>