改善我的Javascript代碼：設置頁面導航條中鏈接的樣式

Question

javascript + DOM的問題。

有人可以改進我的代碼嗎？

我有一個頁面導航欄像這樣（在某些頁面）：

<div id="pagebar"> 
<a href="iraq_pixra1.html">1</a> 
<a href="iraq_pixra2.html">2</a> 
<a href="iraq_pixra3.html">3</a> 
<a href="iraq_pixra4.html">4</a> 
<a href="iraq_pixra5.html">5</a> 
<a href="iraq_pixra6.html">6</a> 
</div> 

我想我的javascript改變鏈接樣式，以便在當前頁面的樣式突出顯示。

我的JavaScript代碼是這樣的。它會查找當前頁面的網址，然後嘗試將它與其中一個鏈接標記進行匹配。如果匹配，則設置樣式。

function setPageBarStyle() { 
    var pageNavBar = document.getElementById("pagebar"); 

    if (pageNavBar != null) { 
     var fPath = document.location.pathname; 
     var fPathParts = fPath.split('/'); 
     var fName = (fPathParts[fPathParts.length-1]); // file name after last slash. e.g. xyz.html 

     var linkTags = pageNavBar.getElementsByTagName("a"); 
     for (var ii = 0; ii < linkTags.length; ii++) { 
      var aUrl = linkTags[ii].href; 
      var aUrlParts = aUrl.split("/"); 
      var aUrlLastPart = (aUrlParts[aUrlParts.length-1]); // part after last slash. e.g. xyz.html 
      if (aUrlLastPart == fName) { 
       linkTags[ii].style.border="thin solid blue"; 
      } 
     } 
    } 
} 

setPageBarStyle(); 

我該如何改進代碼？我是DOM腳本的新手。

我分離路徑的方式看起來太冗長，有許多變量。我認爲這可以用正則表達式完成，但不知道如何使用JavaScript/DOM。

謝謝。

Answer 1

你可以改變這一點：

var aUrl = linkTags[ii].href; 
var aUrlParts = aUrl.split("/"); 
var aUrlLastPart = (aUrlParts[aUrlParts.length-1]); // part before last slash. e.g. xyz.html 

有了這個：

var aUrlLastPart = linkTags[ii].href.split("/").pop(); 

的pop（）方法將返回拆分（返回數組的最後一個元素），並從陣列中刪除（在你的情況下，這是無關緊要的）。

我也建議檢查出jQuery或同類者，以管理跨瀏覽器的JS更容易...

讓我知道這是否有助於！ :)