javascript - HTML 函数？

Question

我有一个重复的 HTML 代码，例如：

<figure class="print">
    <a href="#">
        <img src="images/5.png" alt="" />
        <dl>
            <dt>Client</dt>
            <dd>Envato</dd>
            <dt>Role</dt>
            <dd>Print</dd>
        </dl>
    </a>
</figure>

有没有一种聪明的方法可以从中制作一个“功能”（接受标题和图像作为参数），还是我需要多次重复该代码？

Answer 1

with HTML you don't have the possibility to write functions that generate what you want. It seems that you would like to generate dynamic content. This is usually done by employing a scripting language.

So you have two options here:

1. Use a server side scripting language like PHP
2. If you want a client side solution you could use JavaScript which can dynamically create content for you.

For further information just Google for some simple tutorials.

Answer 2

There are no way in pure HTML.

You can use JavaScript(jQuery) or back-end script, like PHP.

$("html").append($(".print").clone());

Answer 3

As other people have said, HTML is a declarative language. However, with modern frameworks like AngularJS, you can write things like:

<figure class="print" ng-repeat="figure in figures">
    <a href="#">
        <img ng-src="{{figure.image}}" alt="" />
        <dl>
            <dt>Client</dt>
            <dd>{{figure.captions.client}}</dd>
            <dt>Role</dt>
            <dd>{{figure.captions.role}}</dd>
        </dl>
    </a>
</figure>

The corresponding model would be:

var figures = [{
  image: 'images/5.png',
  captions: {
    client: 'Envato',
    role: 'Print'
  }
}, {
  image: 'images/6.png',
  captions: {
    client: 'Another caption',
    role: 'Print'
  }
}];

It takes some time to get used to it, but you should read the code of their TODO example app.

Answer 4

尝试使用 jquery 模板。

<script src="jquery.tmpl.js" type="text/javascript"></script> 

<script type="text/javascript">
$(document).ready(function() {
var data = [
{ name: "Astor", product: "astor", stocklevel: "10", price: 2.99},
{ name: "Daffodil", product: "daffodil", stocklevel: "12", price: 1.99},
{ name: "Rose", product: "rose", stocklevel: "2", price: 4.99},
{ name: "Peony", product: "peony", stocklevel: "0", price: 1.50},
{ name: "Primula", product: "primula", stocklevel: "1", price: 3.12},
{ name: "Snowdrop", product: "snowdrop", stocklevel: "15", price: 0.99},
];
$('#flowerTmpl').tmpl(data).appendTo('#row1');
});
</script>
<script id="flowerTmpl" type="text/x-jquery-tmpl">
  <div class="dcell">
  <img src="${product}.png"/>
  <label for="${product}">${name}:</label>
  <input name="${product}" data-price="${price}" data-stock="${stocklevel}"
  value="0" required />
 </div>
</script>

Answer 5

您可以使用下划线模板执行此操作，例如：

<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>

<script id="template" type="text/html">
  <% data.forEach(function(item){ %>
    <figure class="print">
      <a href="#">
        <img src="<%= item.src %>" alt="" />
        <dl>
          <dt>Client</dt>
          <dd><%= item.client %></dd>
          <dt>Role</dt>
          <dd><%= item.role %></dd>
        </dl>
      </a>
    </figure>
  <% }); %>
</script>

<div id="container"></div>

在您的 JavaScript 中：

var data = [
  {
    src: 'images/5.png',
    client: 'Envato',
    role: 'Print'
  },
  {
    src: 'images/4.png',
    client: 'Foo',
    role: 'Bar'
  }
];

var template = document.querySelector('#template').innerHTML;
var html = _.template(template, {data: data});

document.querySelector('#container').innerHTML = html;