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

So my documents structure looks like this:

所以我的文档结构如下所示:

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

The way I add the images right now is by using a script tag after each p element and using document.write inside a for loop in that script.

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

I want to keep all of JavaScript and jQuery separately from HTML. What is the best way to do this?

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

3 个解决方案

#1

If you want to keep JavaScript out of the HTML file, I would suggest you to create a separate file with your JavaScript(.js file) code and then reference to it from your.html file where you want to use that JavaScript, like this:

如果你想让JavaScript远离HTML文件,我建议你用你的JavaScript(.js文件)代码创建一个单独的文件,然后从你想要使用JavaScript的your.html文件中引用它,就像这样:

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

Then in your .html file add to each paragraph tag an ID attribute that is unique for each parahraph tag, like this:

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

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

Then you could write something like this to your .js file:

然后你可以写这样的东西到你的.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);

You basically create a function which you will call on each paragraph. Functions finds paragraph element by the unique id and assigns it to the paragraph variable. Then it uses for loop to loop for how_many_times every time appending <img> tag to the existing content of the paragraph.

您基本上创建了一个函数,您将在每个段落上调用它。函数通过唯一ID查找段落元素,并将其分配给段落变量。然后每次将在HTML中多次重复同一图像的最佳方法是什么？标记附加到段落的现有内容时,它使用for循环for how_many_times。

#2

-1

Based on what I know, there's no way to do such thing. You can try to use Angular.JS, which provides some "loop features" inside HTML, based on a Javascript array. e.g:

根据我的了解,没有办法做到这一点。您可以尝试使用Angular.JS,它基于Javascript数组在HTML中提供一些“循环功能”。例如:

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>

Replace paragraphs for images.

替换图像的段落。

#3

-1

Css? if Image size is 100*100px

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

add div
set background for it (image)

为它设置背景(图像)

set width = 100px

设置宽度= 100px

set height 500px (100 * times u need to repeat)

设置高度500px(100 *倍你需要重复)

p.repeat25 + div.image { width: 100px; height: 2500px; background: url(image.png); }

p.repeat25 + div.image {width:100px;身高:2500px; background:url(image.png); }

#1