如果URL哈希不包含任何字符串，請執行函數

Question

我正在編寫一個腳本來根據哈希中的字符串更改哪個元素可見。該腳本將放在博客頁面上，用戶可以按類別過濾博客文章。當用戶過濾到某個類別時，該類別會以哈希鏈接的形式附加到網址中。

example.com/#categoryA 

在這一點上，我想對應於每個組篩選的文章的文本框出現在組合並肩作戰。但是，如果用戶沒有過濾的職位，或過濾帖子去查看所有帖子，有URL中的單個哈希是這樣的：

example.com/# 

在這種情況下，我需要有一個默認的文本框被顯示。

我的腳本（下圖）除了顯示默認的文本框，只有一個哈希值時纔會顯示。

var frag = window.location.href.split("#"); 
var hashClassChange = function() { 
    if (window.location.hash) { 
    //If the url hash contains commercial, show the commercial box, hide the last active box 
    if (window.location.hash.indexOf('commercial') == 1) { 
     $('#box1').addClass("active"); 
     $('#default').removeClass("active"); 
     $('#box2').removeClass("active"); 
     $('#box3').removeClass("active"); 
     $('#box4').removeClass("active"); 
    } 
    //If the url hash contains hospitality, show the hospitality box, hide the last active box 
    else if (window.location.hash.indexOf('hospitality') == 1) { 
     $('#box2').addClass("active"); 
     $('#default').removeClass("active");; 
     $('#box1').removeClass("active"); 
     $('#box3').removeClass("active"); 
     $('#box4').removeClass("active"); 
    } 
    //If the url hash contains municipal-institutional, show the municipal/institutional box, hide the last active box 
    else if (window.location.hash.indexOf('municipal-institutional') == 1) { 
     $('#box3').addClass("active"); 
     $('#default').removeClass("active"); 
     $('#box1').removeClass("active"); 
     $('#box2').removeClass("active"); 
     $('#box4').removeClass("active"); 
    } 
    //If the url hash contains residential, show the residential box, hide the last active box 
    else if (window.location.hash.indexOf('residential') == 1) { 
     $('#box4').addClass("active"); 
     $('#default').removeClass("active"); 
     $('#box1').removeClass("active"); 
     $('#box2').removeClass("active"); 
     $('#box3').removeClass("active"); 
    } 
    //If the url hash does not contain any string, show the default box 
    else if (!frag[1].length) { 
     $('#default').addClass("active"); 
     $('#box1').removeClass("active"); 
     $('#box2').removeClass("active"); 
     $('#box3').removeClass("active"); 
     $('#box3').removeClass("active"); 
    } 
    } 
}; 
// repeats function every 500 milliseconds to check if the url hash has been changed 
setInterval(hashClassChange, 500); 

使默認文本框顯示當URL在一個單一的哈希結束我該如何解決這個腳本？

我有一個codepen設置（http://codepen.io/ben393/pen/GNVqRX）以行動表達這一點。

Answer 1

不知道爲什麼你正在使用這個變量的frag，它永遠不會改變。

你可以做以下

if(window.location.hash.length < 2) { ..... }

此外，如果有什麼能夠阻止你，你可以通過setInterval

$(window).bind('hashchange', hashClassChange); 

Answer 2

您可以檢查最後一個字符是否爲＃。

var lastChar = location.pathname.substr(location.pathname.length - 1); 
if(lastChar == '#') 
//Your default textbox show hide logic goes here 

Answer 3

請您用下面的代碼試試：

//If the url hash does not contain any string, show the default box 
else if (frag.length < 1 || (frag.length > 1 && frag[1].length == 0)) { 
    //if we don't have # in URL then frag will have only single 0th index 
    //if we have # in URL but nothing after that then its length will be zero 
    $('#default').addClass("active"); 
    $('#box1').removeClass("active"); 
    $('#box2').removeClass("active"); 
    $('#box3').removeClass("active"); 
    $('#box3').removeClass("active"); 
} 

Answer 4

的問題是，因爲當你點擊默認window.location.hash將是一個empty string所以如果在結果最後點擊的話，會不會進去第一將可見。

刪除if (window.location.hash) {}一部分，當你期待它會奏效。

var frag; 
 
frag = window.location.href.split("#"); 
 
var hashClassChange = function() { 
 
\t 
 
    if (window.location.hash.indexOf('commercial') == 1) { 
 
     $('#box1').addClass("active"); 
 
     $('#default').removeClass("active"); 
 
     $('#box2').removeClass("active"); 
 
     $('#box3').removeClass("active"); 
 
     $('#box4').removeClass("active"); 
 
    } 
 
    else if (window.location.hash.indexOf('hospitality') == 1) { 
 
     $('#box2').addClass("active"); 
 
     $('#default').removeClass("active");; 
 
     $('#box1').removeClass("active"); 
 
     $('#box3').removeClass("active"); 
 
     $('#box4').removeClass("active"); 
 
    } 
 

 
    else if (window.location.hash.indexOf('municipal-institutional') == 1) { 
 
     $('#box3').addClass("active"); 
 
     $('#default').removeClass("active"); 
 
     $('#box1').removeClass("active"); 
 
     $('#box2').removeClass("active"); 
 
     $('#box4').removeClass("active"); 
 
    } 
 
    else if (window.location.hash.indexOf('residential') == 1) { 
 
     $('#box4').addClass("active"); 
 
     $('#default').removeClass("active"); 
 
     $('#box1').removeClass("active"); 
 
     $('#box2').removeClass("active"); 
 
     $('#box3').removeClass("active"); 
 
    } 
 
    else if (typeof frag[1] == 'undefined' || !frag[1].length) { 
 
     $('#default').addClass("active"); 
 
     $('#box1').removeClass("active"); 
 
     $('#box2').removeClass("active"); 
 
     $('#box3').removeClass("active"); 
 
     $('#box3').removeClass("active"); 
 
    } 
 
}; 
 

 
setInterval(hashClassChange, 500);

body{ 
 
    font-family:sans-serif; 
 
} 
 
#default{ 
 
    background:red; 
 
} 
 
#box1{ 
 
    background:orange; 
 
} 
 
#box2{ 
 
    background:yellow; 
 
} 
 
#box3{ 
 
    background:green; 
 
} 
 
#box4{ 
 
    background:lightblue; 
 
} 
 
li { 
 
    display: inline-block; 
 
    width: 400px; 
 
    padding: 10px; 
 
    position: absolute; 
 
    opacity: 0; 
 
    transition: opacity 1s; 
 
} 
 
li.active{ 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Links to filter posts: 
 
<a href="#">no category (show all posts)</a> | 
 
<a href="#commercial">Commercial</a> | 
 
<a href="#hospitality">Hospitality</a> | 
 
<a href="#municipal-institutional">Municipal/Institutional</a> | 
 
<a href="#residential">Residential</a> 
 

 
<ul> 
 
    <li id="default" class="active"><b>Default text</b> Quisque posuere augue eu vulputate vestibulum. Mauris lacinia diam sit amet magna vulputate sodales et vel magna. Integer eros diam, faucibus nec mi sit amet, suscipit ornare massa. Praesent convallis ut lorem fringilla fringilla. Pellentesque sed nisi sapien. Maecenas sit amet placerat augue. Nullam auctor ligula risus, et laoreet nisl varius ac. Donec euismod erat neque, in viverra sapien luctus eget.</li> 
 
    <li id="box1"><b>Commercial text</b> Nulla justo quam, sagittis in turpis a, rutrum dapibus tellus. Sed porttitor massa nec urna rutrum finibus. In sit amet sagittis orci. Proin ligula quam, tempus eget ligula nec, gravida venenatis tellus. Quisque vitae nisl a ipsum semper finibus. Proin vehicula molestie arcu, nec facilisis justo tempus id. Morbi lectus dui, luctus non tellus ac, varius aliquam dui. Morbi commodo nulla eget luctus ullamcorper. Nulla facilisi. Fusce dapibus vestibulum sapien, ut laoreet libero pharetra in.</li> 
 
    <li id="box2"><b>Hospitality text</b> Sed eget nunc lobortis, varius felis ut, scelerisque tortor. Maecenas vitae nunc leo. Mauris non facilisis risus, vel tincidunt enim. Donec pharetra nisi id suscipit consectetur. Integer lacinia in eros at tincidunt. Praesent et enim sem. Sed in viverra erat, vitae tempus felis. Vestibulum id sodales leo.</li> 
 
    <li id="box3"><b>Municipal/Institutional text</b> Maecenas rutrum diam nec sapien consectetur, a viverra enim commodo. Curabitur a eros risus. Quisque viverra elementum ipsum, sit amet commodo libero tristique non. Nullam blandit interdum dolor non vulputate. Morbi et lacus blandit, blandit ipsum non, mollis eros. Duis sit amet ex sed felis congue vestibulum. Aliquam ultrices viverra est, quis posuere est consectetur vel. Duis viverra magna sed dignissim semper. Pellentesque varius pretium justo, eleifend placerat lectus fringilla non.</li> 
 
    <li id="box4"><b>Residential text</b> Pellentesque dui enim, pulvinar et dignissim a, ultricies sed sapien. Mauris pulvinar ipsum a est feugiat euismod. Cras sed rutrum lorem. Aenean cursus a augue in laoreet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse non luctus lacus, in dignissim diam. Quisque vitae ipsum ac eros cursus consectetur non id libero. Aenean mauris nisl, sagittis vitae nisi et, sagittis venenatis ligula. Donec libero odio, vulputate et lacinia quis, feugiat quis dui.</li> 
 
</ul>