前言

接下來終於開始進入實作練習,否則看第一章時真的有點想睡哈哈哈,第一個需求是:

『 頁面要有四個區塊,每個區塊各具有四張圖,我需要一則訊息說:「 你的折扣是 」並且是一個隨機折扣量( 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 方法:

function

  1. 包含 jQuery 程式庫的標籤
  2. 確認頁面已經準備好進行互動
  3. 想要將點擊事件附加在哪個元素上
  4. 告訴 JS 直譯器元素在被點擊( click )時做某事
  5. 函式是一種將我們想做的事情集合起來的機制
  6. 用大括號 { } 來包含程式碼區塊( code block )
  7. 因為它位在點擊動作的小括號中 ( ) ,該函式就會在點擊被觸發時開始執行

 

<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 在元素的結尾( 仍然在內部 )插入內容。 append
prepend 在元素的開頭( 仍然在內部 )插入內容。 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) 想成是「 取決於情境的 」,它會隨著你在哪裡或何時使用而有所不同。

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 刪除被選元素及其子元素。 remove
empty 刪除被選元素的子元素。 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 ,接著隱藏該元素。 slideup
slideDown 滑下效果是改變元素的 height 性質,從 0 到它在 CSS 樣式中所設定的大小。 slidedown
slideToggle 滑動切換效果指的是「 如果現在是滑上就改成滑下,反之滑下就改成滑上。 」 slidetoggle

 

淡入 / 淡出效果

利用 fade 效果來控制 HTML 元素的 opacity ( 不透明 )和 transparency ( 透明 )性質。

名稱 介紹 範例
fadeIn 淡入已隱藏的元素 fadein
fadeOut 淡出可見元素 fadeout
fadeToggle 淡化切換效果指的是「 如果現在元素是可見的淡出,反之隱藏的就淡入。 」 fadetoggle
fadeTo 淡化成賦予給元素的不透明度( 值介於 0 與 1 之間 ) fadeto

 


 

參考資料

深入淺出 jQuery ( Ryan Benedetti, Ronan Cranley 著、楊仁和 譯 )


#jq #jq總務處 #深入淺出 jQuery #click #variable #floor #random #append #prepend #$(this) #remove #empty #slideUp #slideDown #slideToggle #fadeIn #fadeOut #fadeToggle #fadeTo







Related Posts

W12_Bootstrap 筆記

W12_Bootstrap 筆記

第二章:5 將 Filter 打包

第二章:5 將 Filter 打包

GraphQL Summit 2019 與會分享

GraphQL Summit 2019 與會分享


Comments