在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中多次重複同一圖像的最佳方式是什麼？

回答

相關問題