Javascript เทคนิค Check & Get ค่า Hash จาก URL

Spread the love

จำนวนผู้เข้าชม : 48

เราขอแนะนำตัวอย่างโค้ด Javascript สำหรับ Check & Get ค่า Hash จาก URL โดยเทคนิคนี้ มักจะใช้กันในกรณีที่เราต้องการให้ Element ที่มีความสัมพันธ์กับ URL Hash เกิด Event บางอย่างเช่น Active เมนูที่ตรงกับ URL Hash จะเขียนยังไง ลองตามมาดูจ้า

ตัวอย่าง การเขียน Javasript สำหรับ ตรวจสอบ URL Hash

โดยตัวอย่างโค้ด เราจะทำการสร้าง HTML สำหรับเมนูขึ้นมาและกำหนดให้แต่ละเมนูมี Hash ตามตัวอย่างนี้

<div class="menu-wrapper">
    <ul class="demo-menu">
        <li class="menu-item1"><a href="#menuitem1">Menu1</a></li>
        <li class="menu-item2"><a href="#menuitem2">Menu2</a></li>
        <li class="menu-item3"><a href="#menuitem3">Menu3</a></li>
        <li class="menu-item4"><a href="#menuitem4">Menu4</a></li>
    </ul>
</div>

จากนั้นในส่วนของ Javascript เราจะเขียนร่วมกับ jQuery โดยให้ทำการ Detect URL Hash เมื่อโหลดหน้าเพจเสร็จแบบนี้

<script>
    jQuery(document).ready(function($){
        if(window.location.hash) {
            let hash = window.location.hash.substring(1);
            $('.demo-menu li').each(function(){
                if($(this).find('a').attr('href').replace('#','') === hash){
                    $(this).addClass('active');
                }
            });
        } else {
            $('.demo-menu li:first-child').addClass('active');
        }
    });
</script>

คำอธิบายเพิ่มเติม

เป็น Method สำหรับดึงค่า Hash มาจาก URL

if(window.location.hash) {
    // กรณีที่ตรวจสอบพบ Hash ให้เข้าเงื่อนไข IF
} else {
    // กรณีที่ตรวจสอบไม่พบ Hash ให้เข้าเงื่อนไข Else
}

Function สำหรับเปรียบเทียบ Hash ของ URL กับ Href ของ Link tag

$('.demo-menu li').each(function(){
    if($(this).find('a').attr('href').replace('#','') === hash){
        console.log($(this).find('a').attr('href')+' '+hash);
        $(this).addClass('active');
    }
});

เป็นยังไงกันบ้างคะสำหรับบทความ วิธีทำ Search Table การ Filter ซ่อน/แสดง row เมื่อกรอก Textbox ดูเพลินก็หวังว่าบทความของเราจะเป็นประโยชน์ต่อท่านไม่มากก็น้อย นอกจากนี้ เรายังมีบทความดี ๆ อีกมากมาย คุณสามารถลองคลิกเขาไปอ่านบทความอื่น ๆ ตามลิงค์ด้านล่างได้เลย