如何使用jQuery和XML數據更改使用CSS的HTML元素？

Question

我有一個顯示系統狀態的站點，根據它顯示的系統的健康狀況，系統狀態後面有一個彩色條。我使用jQuery的HTML是：

<script> 
    function myExampleSite() 
    { 
    var myURL = window.location.href; 
    var dashIndex = myURL.lastIndexOf("-"); 
    var dotIndex = myURL.lastIndexOf("."); 
    var result = myURL.substring(dashIndex + 1, dotIndex); 
    return result; 
    } 

    var exampleSite = myExampleSite(); 
</script> 

<script> 
var root = null; 
$(document).ready(function() 
{ 
    $.get("Status_Pages.xml", 
    function (xml) 
    { 
     root = $(xml).find("site[name='" + exampleSite + "']"); 

     var status = $(root).find("systemStatus"); 
     var color = status.attr("color"); 
     $("#status").html(status.text()); 
     $("#status").attr("color", color); 

     result = $(root).find("networkNotes"); 
     $("#networkNotes").html($(result).text()); 

     result = $(root).find("headerImage"); 
     $("td#headerImage").html($(result).text()); 

     ....etc etc 
    }); 
}); 
</script> 

我的XML文件看起來像這樣。

<sites> 
    <site name="Template"> 
     <headerImage>images/template-header.png</headerImage> 
     <productVersion>[Version goes here]</productVersion> 
     <systemStatus color="green">Normal</systemStatus> 
     <networkNotes>System status is normal</networkNotes> 
    </site> 
</sites> 

我有幾個<site> s表示都有自己的數據將填充各個網站的不同區域。儘管我遇到了麻煩。

我目前顯示我的狀態的方式是這樣的：

<tr> 
    <td class="table_header"> 
     Current System Status 
    </td> 
</tr> 
    <table><tr> 

     <td id="status"></td> 

    </tr></table> 

    <tr> 
     <td class="table_header"> 
     Network Notes 
    </td> 
    </tr> 

現在它是硬編碼，以顯示與任何文字背後的紅色，綠色或黃色條指示系統狀態系統的健康狀況，但我需要能夠讀取該網站的XML值。

棘手的部分是，我也使用來自CSS的這個網站的特定部分的數據。有關這一點的CSS代碼是（有一個綠色，黃色和紅色）：

#status[color=green] { 
    color: white; 
    text-align: left; 
    background: url(images/greenbar.jpg) no-repeat; 
} 

#status[color=yellow] { 
    color: black; 
    text-align: left; 
    background: url(images/yellow.jpg) no-repeat; 
} 

#status[color=red]{ 
    color: black; 
    text-align: left; 
    background: url(images/red.jpg) no-repeat; 
} 

**我如何能在系統狀態讀取字符串，用color元素的屬性來填充我的HTML沿這樣每個站點都有不同的圖像，具體取決於XML中的內容？ **

我已經嘗試了上述，它給文本的顏色背景，而不是圖像的網址背景。

它讀取正確的狀態，但圖像永遠不會出現在它後面。

Answer 1

如果我理解了您的問題，那麼您的XML中有信息要顯示在HTML中。根據XML的狀態/內容，您也希望使用CSS以不同方式顯示/呈現/設置樣式。

使用CSS，您可以使用ID，類或[color=green]屬性來選擇事物。但是，您提供的代碼，您沒有將color屬性附加到您的HTML。因此，爲了使這項工作，你有CSS，你需要做的是這樣

var status = $(root).find("systemStatus"); 
var color = status.attr("color"); //get the attribute value from the XML 
$("#status").attr("color", color); //assign the attribute value to the HTML 
$("#status").html(status.text()); 
result = $(root).find("networkNotes"); 
$("#networkNotes").html($(result).text()); 

An example of this

但前進，語義，我覺得你不需要使用color="green"。它實際上不是「正確」的方式（就內容和演示文稿而言）。我實際上會建議使用類並根據實際的「狀態」來分配它們。因此示例normal,warning和danger。然後，您可以簡單地將顏色信息（或「演示文稿」信息）放在CSS文件中。

所以你的XML的地位會像

<systemStatus>Normal</systemStatus> 

和jQuery代碼會是這樣的

var status = $(root).find("systemStatus").text(); 
$("#status").html(status); 
$("#status").attr("class", status.toLowerCase()); 

和你的CSS將會像

#status.normal { 
    background:green 
} 
#status.congested { 
    background:yellow; 
    color:black 
} 

#status.down { 
    background:red 
} 

Example