昨天寫的小網站後續看文章時覺得有一部分JS有硬幹的嫌疑(?)
所以把一些部分做了改動

首先使用了HTML 的 template元素
將預想使用的程式碼寫入template中
我要使用的程式碼是

<img src="IMG_HERE" class="key" id="KEY_HERE" style="z-index: Z_HERE;">

會需要被改動的地方統一用"英文命名"+"_HERE"做標記，JS替換時會比較容易找
各自作用在寫JS時再介紹，放入template後長這樣

<template id="template01" style="display: none;">
    <img src="IMG_HERE" class="key" id="KEY_HERE" style="z-index: Z_HERE;">
</template>

因為這邊昨天已經寫好CSS相關內容了就直接設定看不見，若是還沒寫CSS的話可以先寫好CSS再加上display:none做隱藏

HTML加入這行後CSS不用做更動，直接去到JS
昨天的程式碼是把所有button分開來寫JS，今天直接使用for迴圈把同性質的一起寫了
首先是甜筒的部分

for (let i = 1; i <= 5; i++) {
    let tmp = $('#template01');
    $("#addItem_" + i).click(function () {
        let div = tmp.html();
        div = div.replace("IMG_HERE", "https://raw.githubusercontent.com/sweetyue9045/little_game/main/img/0_" + i + ".png");
        div = div.replace("KEY_HERE", "");
        div = div.replace("Z_HERE", "0");
        $("#showBlock").prepend(div);
    })
}

昨天忘了提到圖片使用網址是因為之前上傳github時圖片網址有跑掉的問題，所以後來改成放入github上傳後的網址
KEY_HERE是要給甜筒做使用的，先跳過
因為甜筒永遠是最後一個所以這邊就直接把z-index設成0
控制按鈕的disabled比較冗長這邊就不貼了，反正五個甜筒是一樣的設定

接下來是冰淇淋

for (let i = 1; i <= 9; i++) {
    let tmp = $('#template01');
    $("#add-" + i).click(function () {
        txtId++
        let div = tmp.html();
        div = div.replace("IMG_HERE", "https://raw.githubusercontent.com/sweetyue9045/little_game/main/img/" + i + ".png");
        div = div.replace("KEY_HERE", "key"+txtId);
        div = div.replace("Z_HERE", txtId);
        $("#showBlock").prepend(div);
        $("#del").attr("disabled", false);
    })
}

這邊的KEY_HERE就有放入內容了
txtId是我用來記錄目前有多少冰淇淋的變數
把txtId加入每個冰淇淋的ID之中，讓冰淇淋的ID都不同，刪除按鈕的主要函式remove才能順利被使用
而Z_HERE是為了讓上層冰淇淋的圖層比較高，沒什麼原因，就比較好看

.
使用for迴圈加上template之後JS程式碼變得十分整潔
這邊我所使用的程式碼較短可能比較沒感覺，但如果需要新增的程式碼很長的話就會有很明顯的差別了

Template在JS中的用法主要是幾段程式碼

let tmp = $('#template01');

先抓取設定的template內容

let div = tmp.html();

然後存取下來方便後面使用

div = div.replace("IMG_HERE", "https://raw.githubusercontent.com/sweetyue9045/little_game/main/img/" + i + ".png");
div = div.replace("KEY_HERE", "key"+txtId);
div = div.replace("Z_HERE", txtId);

這邊將抓取內容中我們設定的「關鍵字」替換成我們要使用的東西

$("#showBlock").prepend(div);

最後一樣是加入在div中

template在使用時，搭配有後台資料庫去渲染的效果會更好
這邊因為內容較少，下次如果有寫到較多資料的應該會更有感覺

今天的每日寫網站就到這邊吧，來想明天要幹嘛了