Каков наилучший способ повторить одно и то же изображение несколько раз в 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>

Как я добавить изображения прямо сейчас с помощью тега сценария после каждого элемента р и с помощью document.write внутри для цикла в этом сценарии.

Я хочу, чтобы все JavaScript и jQuery были отдельно от HTML. Каков наилучший способ сделать это?

источник

2016-07-26 Ammar Akhtar

Вы не разместили javascript-код .. – Toby

Ну, я использую JADE как свой препроцессор HTML, и это можно сделать очень легко, читайте здесь: http://jade-lang.com/reference/iteration/ , Я могу предоставить вам дополнительную информацию о нефрите, если хотите. Другим способом было бы, если вы не захотите увидеть JS-код в своем HTML-файле, вы можете включить эти файлы: D –

Я просто расскажу об этом здесь, прежде чем кто-нибудь скажет что-то вроде * «Не используйте document.write () "*. Использование его для этого случая вполне допустимо и является правильным способом его использования. –

-1

Css? если размер изображения составляет 100 * 100px

добавить ДИВ
набор фоновых для него (изображение)
комплект ширина = 100px
комплект высота 500px (100 * раз и нужно повторить)

p.repeat25 + div.image { ширина: 100px; высота: 2500px; background: url (image.png); }

источник

2016-07-26 22:57:42 uamanager

-1

Основываясь на том, что я знаю, что нет никакого способа, чтобы сделать такую вещь. Вы можете попытаться использовать Angular.JS, который предоставляет некоторые «функции цикла» внутри HTML, основанные на массиве Javascript. например:

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. Затем он использует цикл для цикла для how_many_times каждый раз при добавлении тега <img> к существующему содержимому абзаца.

источник

2016-07-26 23:21:14 an0o0nym

Каков наилучший способ повторить одно и то же изображение несколько раз в HTML?

ответ

Смежные вопросы