編輯html div已被複制到jquery加載的html文件

所以我有一個網站Header.html。標題中有三個按鈕。我已經將Header.html複製到jquery負載的所有其他頁面中。現在我想要做的是改變其中一個按鈕的顏色，取決於它所在的頁面。但是，當我在JavaScript中使用的document.getElementById它無法找到我從header.html中編輯html div已被複制到jquery加載的html文件

複製按鈕的DIV這裏的header.html中

<div id="Header_Wrapper"> 
    <div id="Header_PageLinksWrapper"> 
     <div class="Header_PageLink"> 
      <a class="Header_PageLinkText" id="PageLink_Games" href="..\Pages\Games.html">Games</a>  
     </div> 
     <div class="Header_PageLink"> 
      <a class="Header_PageLinkText" id="PageLink_AboutMe" href="..\Pages\AboutMe.html">About Me</a>  
     </div> 
     <div class="Header_PageLink"> 
      <a class="Header_PageLinkText" id="PageLink_CV" href="..\Pages\CV.html">CV</a>  
     </div> 
    </div> 
</div>

JavaScript文件：

$(document).ready(
    function() 
    { 
     $("#Header").load("..\\Templates\\Header.html"); 

     var filePath = window.location.pathname; 
     SetPageLinkColours(filePath); 
    } 
); 


function SetPageLinkColours(aPath) 
{ 
    var firstIndex = aPath.lastIndexOf("/"); 
    var lastIndex = aPath.indexOf(".html"); 
    var id = "PageLink_" + aPath.slice(firstIndex + 1, lastIndex); 

    var divElement = document.getElementById(id); 
    if (divElement == null) 
    { 
     console.log("Could not find element " + id); 
    } 
    divElement.style.color = 0xffffff; 
}

一個頁面（如Games.html）

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Adabelle Combrink - Games</title> 

    <link rel="stylesheet" type="text/css" href="..\Templates\Header.css"/> 
    <link rel="stylesheet" type="text/css" href="..\Templates\Page.css"/> 
    <link rel="stylesheet" type="text/css" href="..\Pages\Games.css"/> 

    <script type="text/javascript" src="..\Scripts\jQuery.js"></script> 
    <script type="text/javascript" src="..\Scripts\Defaults.js"></script> 
</head> 
<body> 
    <header> 
     <div id="Header"></div> 
    </header> 
</body> 
</html>

這是什麼讓我在控制檯湊ld找不到元素PageLink_Games。如果我使用Header等Games.html中的內容，則不會出現該錯誤。是否有這樣做同樣的事情的任何其他方式。我知道你可以包括文件到海誓山盟用PHP，但我還沒有得到這個權利，似乎沒有能夠在Visual Studio中運行PHP文件。

來源

2014-01-13 user3163192

你爲什麼不使用jQuery？ – schnawel007

是本document.getElementsByClassName（）？ – next2u

jQuery.load有一個成功回調。使用它來確保您的代碼只在加載完成後才能執行。

$(document).ready(
    function() 
    { 
     $("#Header").load("..\\Templates\\Header.html", null, function() { 
      var filePath = window.location.pathname; 
      SetPageLinkColours(filePath); 
     }); 
    } 
);

而且你SetPageLinkColours功能可以使用jQuery改善：

function SetPageLinkColours(aPath) 
{ 
    var firstIndex = aPath.lastIndexOf("/"); 
    var lastIndex = aPath.indexOf(".html"); 
    var id = "PageLink_" + aPath.slice(firstIndex + 1, lastIndex); 

    var divElement = $("#"+id); 
    if (!divElement.length) 
    { 
     console.log("Could not find element " + id); 
    } 
    else 
    { 
     divElement.css('color','white'); 
    } 
}

來源

2014-01-13 11:55:39 TiiJ7

加載函數會發出異步請求，所以您的代碼會在它出現之前嘗試查找元素。 ü需要使用負載回調函數http://api.jquery.com/load/

$(document).ready(
    function() 
    { 
     $("#Header").load("..\\Templates\\Header.html", function() { 
      var filePath = window.location.pathname; 
      SetPageLinkColours(filePath); 

     }); 

    } 
);

來源

2014-01-13 11:55:37

編輯html div已被複制到jquery加載的html文件

回答

相關問題