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

所以我的文档结构是这样的：在HTML中多次重复同一图像的最佳方式是什么？

<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元素之后使用document.write内部在该脚本循环。

我想将所有的JavaScript和jQuery与HTML分开保存。做这个的最好方式是什么？

来源

2016-07-26 Ammar Akhtar

您还没有发布任何javascript代码.. – Toby

那么，我使用JADE作为我的HTML预处理器，这可以很容易地完成，请阅读这里：http://jade-lang.com/reference/iteration/ 。如果您愿意，我可以为您提供更多关于玉器的信息。其他方式是，如果你不想在你的HTML文件中看到JS代码，你可以包含这些文件：D –

我只是要在这里提到这个之前，任何人都说* *“不要使用document.write（）“*。在这种情况下使用它是完全有效的，并且是使用它的正确方法。 –

-1

Css？如果图像大小为100×100像素

附加的div
设定宽度
组后台= 100像素
设定高度500像素（100×倍u需要重复）

p.repeat25 + div.image { width：100px; height：2500px; background：url（image.png）; }

来源

2016-07-26 22:57:42 uamanager

-1

根据我所知，没有办法做这样的事情。你可以尝试使用Angular.JS，它基于一个Javascript数组在HTML中提供了一些“循环特性”。 e.g：

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

<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>

的图像替换段落。

来源

2016-07-26 23:01:08

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

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

然后在您的.html文件添加到每个段落标签的ID属性，它是每个parahraph标签唯一的，就像这样：

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

然后，你可以写像这样的东西到你的.j s文件：

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);

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

来源

2016-07-26 23:21:14 an0o0nym

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

回答

相关问题