Question

所以我的文档结构如下：

<p>Repeat image 5 times after this paragraph </p>

<p>Repeat the same image 25 times after this paragraph </p>

<p>Repeat the image again 100 times after this paragraph </p>

我现在添加图像的方法是在每个p元素之后使用脚本标记，并在该脚本中的for循环中使用document.write。

我希望将所有JavaScript和jQuery与HTML分开。这样做的最佳方式是什么？

Answer 1

如果您想将JavaScript保留在HTML文件之外，我建议您使用JavaScript（.js文件）代码创建一个单独的文件，然后从您要使用该JavaScript的your.html文件中引用它，像这样：

<script src="location_of_your_javascript_file/file_name.js"></script>

然后在.html文件中为每个段落标记添加一个对于每个parahraph标记唯一的ID属性，如下所示：

<p id='unique_id'>....</p>
<p id='unique_id2'>....</p>

然后你可以写这样的东西给你的.js文件：

function appendPhotosToParagraph(paragraph_id, how_many_times):
    var paragraph = document.getElementById(paragraph_id);
    for (var i = 0; i < how_many_times; i++) {
        paragraph.innerHTML += "<img src='location_of_your_photo_file/file_name.jpg'";
    }

appendPhotosToParagraph('unique_id', 5);
appendPhotosToParagraph('unique_id2', 25);

您基本上创建了一个函数，您将在每个段落上调用它。函数按唯一ID查找段落元素，并将其分配给paragraph变量。然后，每次将how_many_times标记附加到段落的现有内容时，它都会使用for循环循环<img>。

Answer 2

CSS？如果图像大小为100 * 100px

添加div
为其设置背景（图片）
设置宽度= 100px
设置高度500px（需要重复100次*）

p.repeat25 + div.image { 宽度：100px; 身高：2500px; background：url（image.png）; }

Answer 3

根据我所知，没有办法做这件事。您可以尝试使用Angular.JS，它提供了一些＆＃34;循环功能＆＃34;在HTML中，基于Javascript数组。 e.g：

＆＃13;

angular.module('testing',[])
.controller('TestCtrl', function($scope) {
  $scope.paragraphs = ["p1","p2","p3"];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="testing">
  <div ng-controller="TestCtrl">
    <p ng-repeat="p in paragraphs">
      {{ p }}
    </p>
  </div>
</body>

＆＃13;

替换图像的段落。

在HTML中多次重复同一图像的最佳方法是什么？

3 个答案: