如何使用XML数据更改网站上的图像&jQuery

How to change an image on a site using XML data & jQuery

本文关键字：图像 jQuery 网站 何使用 XML 数据      更新时间：2023-09-26

我有一个网站，在页面的顶部有一个横幅。我已经开始彻底检查我的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>

我的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>，它们都有自己的数据，将填充各个站点的不同区域。不过我遇到了一些麻烦。

第一个问题是它目前如何获取其头图像:html 

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

现在它被硬编码为模板头图像，但我需要使其通用并读取该站点的XML值。因此，而不是硬编码为images/template-header.png，它将读取当前网站的XML值，这仍然是模板头-但它不会为每个页面。

我如何在图像字符串读取填充我的HTML，使每个网站有一个不同的图像取决于什么是在XML?

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

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

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

现在的问题是将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)

它应该可以工作

例子

总之，如果您已经想要动态地将一些值放入HTML标记中，这是非常容易的。.html("<b>bold</b>")表示内容，.attr("attrName","attrValue")表示一般属性。.css("background","red")用于直接更改CSS。还有一些类修改的东西在将来会很有用。

相关文章：