JS AJAX基础实作(2) DAY27

今天要来介绍
下拉选单 change 事件 与 呈现画面
那 change 事件当然伊定是绑在选单上啦~~

let selectMenu = document.querySelector('.selectMenu');
selectMenu.addEventListener('change',updateListSel,false);
function updateListSel(e){
    let selectData = [];
    let str = selectMenu.value;
    console.log(str);
    title.textContent = str;
    for(let i = 0 ;i < data.length; i++){
        if(e.target.value === data[i].Zone){
            selectData.push(data[i]);
        }else if(e.target.value === '全区域景点'){
            selectData = data;
        }
    }
    updateList(selectData);
}

这里我们宣告一个空阵列 来接收未来过滤後的物件
若选择的value值与区域名字符合
则把符合的资料塞进空阵列
若选择的是全区域景点
则空阵列会等於所有资料

当然现在只是在处理资料的部分
并还没有呈现於画面
资料处理完後
便可以开始呈现画面啦

function updateList(data){
    let str = "";
    data.forEach((item) => {
        str +=
            `
            <div class=" col-lg-4 col-md-6 my-3">
                <div class="card text-center h-100">
                    <div class="card-header">
                        ${item.Name}
                    </div>
                    <div class="card-body">
                        <div class="card-img-top bg-cover d-flex justify-content-between align-items-end text-white" style="background-image: url(${item.Picture1}); height: 155px;">
                        </div>
                        <div class="d-flex flex-column align-items-start mt-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <i class="fas fa-clock mr-2"></i>
                                <span class="card-text">${item.Opentime}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <i class="fas fa-map-marker-alt mr-2"></i>
                                <span>${item.Add}</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <i class="fas fa-phone mr-2"></i>
                                <span>${item.Tel}</span>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer ">
                        <span>${item.Ticketinfo}</span>
                    </div>
                </div>
            </div>
        `
    });
    list.innerHTML = str;
}

那今天的介绍就到这里啦~
明天我们会加上gotop按钮
让使用者体验更好
附上今天的CodePen
CodePen: https://codepen.io/wemyferb/pen/rNLNpyY