如何使用XML数据和jQuery更改站点上的图像

I have a site that has a banner at the top of the page. I've started to overhaul my HTML structure and am now getting various pieces of information that populate the site out of an XML file. My HTML that uses the jQuery is:

我有一个网站顶部有横幅的网站。我已经开始彻底改革我的HTML结构,现在我正在从XML文件中获取填充网站的各种信息。我使用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 + "']");

        result = $(root).find("headerImage");
        $("td#headerImage").html($(result).text());
        var imageSrc=$(root).find("headerImage").text();
        $(".PageHeader img").attr("src",imageSrc);

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

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

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

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

My XML file looks like this.

我的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>

I have several <site>s that all have their own data that will populate different areas of individual sites. I've ran into some snags though.

我有几个 ,它们都有自己的数据,可以填充各个站点的不同区域。我遇到了一些障碍。

The first snag is how it currently obtains its header image: html

第一个障碍是它当前如何获得其标题图像:html

<div class="container">

    <div class "PageHeader"> <!-- Header image read from XML file -->
        <img border="0" src=""/>
    </div>

Right now it's hard-coded to be the template header image, but I need to make that generic and read the XML value for that site. So instead of being hard-coded as images/template-header.png it would read the XML value for the current site, which is still going to be the template header - but it won't for every page.

现在它被硬编码为模板头图像,但我需要制作该通用并读取该站点的XML值。因此,它不会被硬编码为images / template-header.png,而是会读取当前站点的XML值,它仍然是模板标题 - 但它不适用于每个页面。

How can I read in the image string to populate my HTML so that each site has a different image depending on what's in the XML?

如何读取图像字符串以填充我的HTML,以便每个站点具有不同的图像,具体取决于XML中的内容?

Edit: Edited code to match current issue. Currently, I just get a broken image, but I can still change it back to the hard-coded image URL (images/template-header.png) and it works.

编辑:编辑代码以匹配当前问题。目前,我只是得到一个破损的图像,但我仍然可以将其更改回硬编码图像URL(images / template-header.png)并且它可以工作。

1 个解决方案

#1

As you already have the code that can extract the image URL information from the XML, which is

因为您已经拥有可以从XML中提取图像URL信息的代码,即

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

It's now a matter of attaching that URL, to the image tag. We need to select the object, and then simply change it's src attribute. With jQuery this is actually pretty easy. It'll look something like

现在是将该URL附加到图像标记的问题。我们需要选择对象,然后只需更改它的src属性。使用jQuery这实际上非常简单。它看起来像

var root = $(xml).find("site[name='" + site + "']");
//get the image url from the xml
var imageSrc=$(root).find("headerImage").text()
//get all the images in class .PageHeader, and change the src
$(".PageHeader img").attr("src",imageSrc)

And it should work

它应该工作

Example

In conclusion, if you already have some values you want to put in HTML tags dynamically, it's pretty easy. There's .html("<b>bold</b>") for content, there's .attr("attrName","attrValue") for general attributes. .css("background","red") for changing CSS directly. There's also some class modifying stuff that would be useful in the future.

总之,如果您已经有一些动态放入HTML标记的值,那么它非常简单。内容有.html(“粗体 ”),一般属性有.attr(“attrName”,“attrValue”)。 .css(“background”,“red”)直接更改CSS。还有一些类修改的东西将来会有用。

#1