iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 22
0
自我挑戰組

「 Nice to meet you , JavaScript . 」- 學習日記 系列 第 22

初探JavaScript - 使用 data-* 綁定並埋入資料到指定元素中

  • data-*

data-*可綁定並將資料埋入某個指定的元素,讓JS可以操作應用。範例:有一個狗狗列表顯示每隻狗狗的名字,並使用data-colordata-olddata-gender分別埋入每隻狗狗的毛色、年齡、及性別資料,在網頁上只顯示狗狗的名字,不過使用JS來設定操作,當狗狗名字被點擊時,會輸出狗狗的相關資料:

<範例程式碼>

    <ul class='dogList'>
        狗狗列表
        <li data-color='Black' data-old='2.5' data-gender='Girl'>Dixie</li>
        <li data-color='White'' data-old=' 12' data-gender='Boy'>Rossi</li>
        <li data-color='White'' data-old=' 15' data-gender='Boy'>Lefo</li>

    </ul>

    <script>
        var dog = document.querySelector('.dogList');

        function info(e) {
            console.log(e);
            //可印出點擊目標的詳細資料,並可從詳細資料中target下的dataset,看到埋在li中
            data-*的所有訊息

            var nodeName = e.target.nodeName;
            // nodeName表被點擊部位的節點名稱
            //因為監聽的區塊為整個UL,但是只希望LI的部分被點擊時才會執行function,所以使用
            nodeName來做判別,若點擊的不是LI,則不繼續執行
            if (nodeName !== 'LI') {
                return;
            }

            //因此可藉由e.target.dataset.color、e.target.dataset.old、
            e.target.dataset.gender的到被點擊狗狗的相關隱藏資料
            var color = e.target.dataset.color;
            var old = e.target.dataset.old;
            var gender = e.target.dataset.gender;

            console.log('顏色:' + color + ',' + '年齡:' + old + ',' + '性
            別:' + gender);
        }

        dog.addEventListener('click', info);
    </script>

分別點擊Dixie、Rossi、Lefo的執行結果:
https://ithelp.ithome.com.tw/upload/images/20200920/20115106UUE8CYCDdC.png

資料參考來源:Hex School


上一篇
初探JavaScript - 使用JS JSON.parse、JSON.stringify 編譯Local Storage中的資料
下一篇
初探JavaScript - JS 瀏覽器 BOM - Window & Screen
系列文
「 Nice to meet you , JavaScript . 」- 學習日記 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言