前言
接下來終於開始進入實作練習，否則看第一章時真的有點想睡哈哈哈，第一個需求是：
『 頁面要有四個區塊，每個區塊各具有四張圖，我需要一則訊息說：「 你的折扣是 」並且是一個隨機折扣量（ 5% 到 10% ），當用戶點擊其中一個區塊時，該訊息會出現在這個圖片下方，如果使用者再次點擊時，我想要丟棄最後的訊息並顯示新訊息。 』
整理一下需求清單
☐ 頁面要有四個區塊，每個區塊各具有四張圖。
☐ 區塊是可以點擊的。
☐ 需要一則訊息說：「 你的折扣是 」並且是一個隨機折扣量（ 5% 到 10% ）。
☐ 當用戶點擊其中一個區塊時，該訊息會出現在這個圖片下方。
☐ 如果使用者再次點擊時，我想要丟棄最後的訊息並顯示新訊息。
那我們就先把 HTML 跟 CSS 做出來吧
HTML
<!DOCTYPE html>
<html>
<head>
<title>Jump for joy Sale</title>
</head>
<body>
<div id="header">
<h2>Jump for joy Sale</h2>
</div>
<div id="main">
<div><img src="images/jump1.jpg" alt=""></div>
<div><img src="images/jump2.jpg" alt=""></div>
<div><img src="images/jump3.jpg" alt=""></div>
<div><img src="images/jump4.jpg" alt=""></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</body>
</html>
CSS
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
div {
float: left;
text-align: left;
}
#header {
width: 100%;
border: 0;
height: 50px;
}
#main {
background-color: #ddd;
height: 650px;
}
#main div {
max-width: calc(25% - 6px);
border: 3px solid #000;
}
img {
max-width: 100%;
vertical-align: middle;
}
</style>
（ 圖片來源 — 低角度攝影的人跳、在藍天下跳躍的女人、半空中跳躍、女人跳 ）
檢視需求清單，目前進度是
☑ 頁面要有四個區塊，每個區塊各具有四張圖。
☐ 區塊是可以點擊的。
☐ 需要一則訊息說：「 你的折扣是 」並且是一個隨機折扣量（ 5% 到 10% ）。
☐ 當用戶點擊其中一個區塊時，該訊息會出現在這個圖片下方。
☐ 如果使用者再次點擊時，我想要丟棄最後的訊息並顯示新訊息。
開始來探究點擊（ click ）事件
為頁面添加 click 方法：
- 包含 jQuery 程式庫的標籤
- 確認頁面已經準備好進行互動
- 想要將點擊事件附加在哪個元素上
- 告訴 JS 直譯器元素在被點擊（ click ）時做某事
- 函式是一種將我們想做的事情集合起來的機制
- 用大括號
{ }來包含程式碼區塊（ code block ） - 因為它位在點擊動作的小括號中
( )，該函式就會在點擊被觸發時開始執行
<script> 標籤為什麼要在 </body> 標籤之前？
過去大家都認為在 <head> 與 </head> 之間是最佳實務建議，不過指令稿所引發的問題是它們會阻斷瀏覽器裡頭的平行下載，來自不同伺服器的圖像可能同時間被下載，一旦你的瀏覽器遇到 <script> 標籤，它就不能再平行下載多個項目，把它們安排在底部才能有助於加速載入你的頁面。
接下來把需要點擊的區塊命名為 guess_box 並把 click 事件附加上去
HTML
<!DOCTYPE html>
<html>
<head>
<title>Jump for joy Sale</title>
</head>
<body>
<div id="header">
<h2>Jump for joy Sale</h2>
</div>
<div id="main">
<div class="guess_box"><img src="images/jump1.jpg" alt=""></div>
<div class="guess_box"><img src="images/jump2.jpg" alt=""></div>
<div class="guess_box"><img src="images/jump3.jpg" alt=""></div>
<div class="guess_box"><img src="images/jump4.jpg" alt=""></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
$(document).ready(function() {
$(".guess_box").click(function() {
alert("你碰到我了！");
});
});
</script>
</body>
</html>
檢視需求清單，目前進度是
☑ 頁面要有四個區塊，每個區塊各具有四張圖。
☑ 區塊是可以點擊的。
☐ 需要一則訊息說：「 你的折扣是 」並且是一個隨機折扣量（ 5% 到 10% ）。
☐ 當用戶點擊其中一個區塊時，該訊息會出現在這個圖片下方。
☐ 如果使用者再次點擊時，我想要丟棄最後的訊息並顯示新訊息。
建立儲存空間
我們使用變數（ variable ）來儲存會變化的資訊（ 或資料 ），可以把變數想像成一個蘿蔔一個坑，像下面的圖一樣，坑（ 內褲 ）指的是「 變數 」，而蘿蔔（ 😳 ）就是「 值 value 」，讓你能更好管理裡面的資料。（ 更多變數內容可以參考 基本資料型態、變數 ）
（ 圖片來源 ）
所以我們現在要產生名為 discount 的變數，裡頭塞從 5 到 10 隨機數的蘿蔔。
<script>
$(document).ready(function() {
$(".guess_box").click(function() {
var discount = Math.floor((Math.random()*5) + 5);
var discount_msg = "<p>你的折扣是 " + discount + "%</p>";
});
});
</script>
floor 是無條件捨去小數到最接近的整數並回傳結果； random 是回傳 0 到 1 之間的隨機數，所以上面的程式碼可以得出最小數（ 0+5 ）、最大數（ 5+5 ）。
接下來用附加事件插入訊息
當你想要用插入頁面的方式來增加新訊息，這裡提供兩個方法：
| 名稱 | 介紹 | 範例 |
|---|---|---|
| append | 在元素的結尾（ 仍然在內部 ）插入內容。 |  |
| prepend | 在元素的開頭（ 仍然在內部 ）插入內容。 |  |
所以這裡我們要使用 append 將變數附加到 guess_box 元素下
<script>
$(document).ready(function() {
$(".guess_box").click(function() {
var discount = Math.floor((Math.random()*5) + 5);
var discount_msg = "<p>你的折扣是 " + discount + "%</p>";
$(".guess_box").append(discount_msg);
});
});
</script>
檢視需求清單，目前進度是
☑ 頁面要有四個區塊，每個區塊各具有四張圖。
☑ 區塊是可以點擊的。
☑ 需要一則訊息說：「 你的折扣是 」並且是一個隨機折扣量（ 5% 到 10% ）。
☐ 當用戶點擊其中一個區塊時，該訊息會出現在這個圖片下方。
☐ 如果使用者再次點擊時，我想要丟棄最後的訊息並顯示新訊息。
用 $(this) 指向當前元素
但現在發生一個錯誤！折扣訊息被重複顯示在每個 div 中，我們必須將變數僅附加在被點擊的那個 div 上，那我們該怎麼做呢？
如果我們想要「 特定地 」指出我們選擇的元素，最簡單的選擇器就是 $(this) 。
把 $(this) 想成是「 取決於情境的 」，它會隨著你在哪裡或何時使用而有所不同。
<script>
$(document).ready(function() {
$(".guess_box").click(function() {
var discount = Math.floor((Math.random()*5) + 5);
var discount_msg = "<p>你的折扣是 " + discount + "%</p>";
$(this).append(discount_msg);
});
});
</script>
檢視需求清單，目前進度是
☑ 頁面要有四個區塊，每個區塊各具有四張圖。
☑ 區塊是可以點擊的。
☑ 需要一則訊息說：「 你的折扣是 」並且是一個隨機折扣量（ 5% 到 10% ）。
☑ 當用戶點擊其中一個區塊時，該訊息會出現在這個圖片下方。
☐ 如果使用者再次點擊時，我想要丟棄最後的訊息並顯示新訊息。
使用刪除事件斬草除根
前面都運作得很好，但是我在每次點擊時都會持續得到折扣碼，要如何阻止這種事發生呢？
| 名稱 | 介紹 | 範例 |
|---|---|---|
| remove | 刪除被選元素及其子元素。 |  |
| empty | 刪除被選元素的子元素。 |  |
這邊我們使用 remove 讓一或多組元素從頁面上消失，然後再將具有 guess_box 類別的所有 p 標籤連根拔起，把它放在點擊事件下方，這樣就可以先移除再生成（ 順序的重要性！ ）。
$(document).ready(function() {
$(".guess_box").click(function() {
$(".guess_box p").remove();
var discount = Math.floor((Math.random()*5) + 5);
var discount_msg = "<p>你的折扣是 " + discount + "%</p>";
$(this).append(discount_msg);
});
});
需求清單完成，可以收工了
☑ 頁面要有四個區塊，每個區塊各具有四張圖。
☑ 區塊是可以點擊的。
☑ 需要一則訊息說：「 你的折扣是 」並且是一個隨機折扣量（ 5% 到 10% ）。
☑ 當用戶點擊其中一個區塊時，該訊息會出現在這個圖片下方。
☑ 如果使用者再次點擊時，我想要丟棄最後的訊息並顯示新訊息。
這裡補充第一章提到的兩個效果
滑動效果
利用 slide 效果來控制 HTML 元素的 height （ 高度 ）性質。
| 名稱 | 介紹 | 範例 |
|---|---|---|
| slideUp | 滑上效果是改變元素的 height 性質，直到它變成 0 ，接著隱藏該元素。 |  |
| slideDown | 滑下效果是改變元素的 height 性質，從 0 到它在 CSS 樣式中所設定的大小。 |  |
| slideToggle | 滑動切換效果指的是「 如果現在是滑上就改成滑下，反之滑下就改成滑上。 」 |  |
淡入 / 淡出效果
利用 fade 效果來控制 HTML 元素的 opacity （ 不透明 ）和 transparency （ 透明 ）性質。
| 名稱 | 介紹 | 範例 |
|---|---|---|
| fadeIn | 淡入已隱藏的元素 |  |
| fadeOut | 淡出可見元素 |  |
| fadeToggle | 淡化切換效果指的是「 如果現在元素是可見的淡出，反之隱藏的就淡入。 」 |  |
| fadeTo | 淡化成賦予給元素的不透明度（ 值介於 0 與 1 之間 ） |  |
參考資料
深入淺出 jQuery （ Ryan Benedetti, Ronan Cranley 著、楊仁和 譯 ）
