javascript - 我如何使用 XML 设计样式

Question

XML 数据

<moblies>
 <moblie>
    <title>IPhone X</title>
    <image>iphoneX.png</image>
    <price>999</price>
 </moblie>
</moblies>

CSS

moblies {
  font-size:80%;
  margin:0.5em;
  font-family: Verdana;
  display:block
}

moblie {
  display:block;
  border: 1px solid silver;
  margin:0.5em;
  padding:0.5em;
  background-color:whitesmoke;
}

title, price {
  display:block;
  font-style: italic;
}

脚本

$(document).ready(function(){
    $.ajax({
      type: "GET",
      url: "xml/data.xml",
      dataType: "xml",
      success: xmlParser
    });
  });

  function xmlParser(xml) {
      $('#load').fadeOut();
      $(xml).find("moblie").each(function()
      {
          $("#container").append('<div class="moblie"><img src="images/' +
            $(this).find("image").text() + '" width="200" height="300" alt ="' +
            $(this).find("title").text() + '" /><br/><div class="title">' +
              $(this).find("title").text() + '<br/>$' +
              $(this).find("price").text() + '</div></div>');
          $(".moblie").fadeIn(1000);
      });
  }

我正在尝试设置我正在导入的 XML 数据的样式，但似乎无法了解您实际上是如何做到这一点的要点。上面我提供了我的 XML、CSS 和我用来显示数据的脚本，如果有人对我哪里出错有任何想法或任何研究链接将不胜感激。

Answer 1

您有一个 XML 文档和一个用于样式设置的 CSS。

所以问题是你的输出格式是什么？我只能猜测它应该是 HTML - 但其他格式如 PDF 也是可能的(需要 XML-FO )。

因此，您尝试的不是设置 XML 样式，而是将 XML 转换为 HTML 并将样式表应用于此输出 (HTML)。

最好的方法是使用 XSLT ，因为这种“语言”有额外的设计来转换xml。但是也可以通过像您这样的某种代码来完成。

另一种解决方案可能是使用正则表达式替换......

但最后但同样重要的是，我认为您忘记了在结果中包含样式表，例如:

<link rel="stylesheet" type="text/css" media="all" href="layout.css" />