យើងមាន munu សម្រាប់ចុច filter ទិន្ន័យនីមួយៗទៅតាមអ្វីមួយដែលយើងកំណត់ ID របស់ menu
នៅក្នុង HTML យើងដាក់ atribute ឲ្យវានៅក្នុង html
<li class="text-menu" data-mid="1">HTML</li>
នៅក្នុង data-នៅទីនេះយើងអាចដាក់ឈ្មោះអ្វីក៏បាន ពីព្រោះនៅពេលក្រោយយើងត្រូវហៅឈ្មោះវាមកប្រើដូចខាងលើ data-mid
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.slim.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col navi">
</div>
</div>
</div>
</body>
<script src="jv.js"></script>
</html>
JavaScript
$(document).ready(()=>{
getMenu()
})
function getMenu(){
$.ajax({
url:"https://script.google.com/macros/s/AKfycbyzBG0A9eTt68V75-UJJnUuKTWwYOdILyLpHpG9-W1yFwk9O0Y5uEe9y0Uh4teHBaAsAw/exec",
type:'GET',
success: res =>{
if(res.STATUS ===200){
let menu = ""
res.DATA.forEach( d =>{
menu +=`<ul><li class="text-menu" data-mid="${d["ID"]}">${d["MENU"]}</li></ul`
})
$(".navi").html(menu)
selectedMenu()
}
}
})
}
function selectedMenu(){
const menuBar = document.querySelectorAll('.text-menu')
menuBar.forEach((e)=>{
e.addEventListener('click', ()=>{
alert(e.dataset.mid)
})
})
}
0 Comments