Question

当我在网站上的XML文件中读取时，我正在尝试将图像路径转换为实际图像。我的XML结构是：

<?xml version="1.0" encoding=UTF=8?>
    <peopleNetwork>
     <person id="1">
      <name>Alice</name>
      <friend>Ruby</friend>
      <image>images/ruby.jpg</image>
     </person>
     <person id="2">
      <name>Tom</name>
      <friend>Katty</friend>
      <image>images/ketty.jpg</image>
     </person>
    </peopleNetwork>

这就是我在我的页面上阅读XML的方式：

$("#container").append($(xmlDoc).find('person[id="1"]').text() + '<br/>')

上面的代码行当前读取的是第一人的所有信息，并以文本格式显示，如下所示：

Alice Ruby images / ruby.jpg

我想要做的是将图像路径转换为实际图像，在线搜索我能够编写此代码：

<img src"images/' +$(this).find("image").text() + '"alt=$(this).find('person[id="1"]').text()>);

我不知道如何将这些放在一起，我是相当新的并尝试使用它但在每次尝试都失败了 - 任何帮助都会受到赞赏，如果我不够清楚，请告诉我。

编辑：我写了这个：

$("#container").append('<div class"peopleNetwork"><img src="images/' + $(xmlDoc).find("image").text() + alt="' + $(xmlDoc).find('person[id="1"]').text())

我不确定这是否正确但是当我运行我的网站时会出现此错误

Uncaught ReferenceError: Invalid left-hand side in assignment

Answer 1

您只需在<img>声明中创建.append()标记。

$.ajax({
	type: "GET",
	url: "./peopleNetwork.xml",
	datatype: "xml",
	success: function(xml){
		var xmlDoc = $.parseXML(xml),
		$xml = $(xmlDoc);
		$xml.find("person").each(function(){
			var image = $(this).children("image").text();
			$("#container").append($(this).children("name").text() + " " + $(this).children("friend").text() + " " + '<img src="./' + image + '">' + "<br />");
		});
	}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>

使用JQuery

1 个答案: