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。但是也可以通过像您这样的代码来做到这一点。

另一种解决方案可能是使用regexp替换...

但最后但并非最不重要的一点是，我认为您忘记将样式表包含在结果中，例如：

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

如何使用XML样式

1 个答案: