Использование javascript для создания элементов details с разными изображениями

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь создать цикл, который создаст элемент details с источником изображения, который увеличивается на 1 число в каждом цикле. Я могу выполнить цикл, создав правильное количество изображений, но я думаю, что они принимают строку кода как дословную вместо применения номера итерации цикла.

попытка picture.innerHTML = "<img src='asset/' i '.jpeg'>" , где i — текущая итерация цикла, не работает. есть какие-либо рекомендации по альтернативам? Это также мой первый вопрос, поэтому я прошу прощения, если я немного неясен.

1. можете ли вы опубликовать цикл foreach, который вы пробовали, но который не работает?

2. я буду позже сегодня вечером, к сожалению, я только что создал эту учетную запись на работе, и файл находится на моем рабочем столе.

3. Я использовал цикл do while, есть ли цикл for each, который я могу использовать для запуска для каждого изображения в файле? Это для приложения, которое я создаю, чтобы упростить управление настольной игрой, в которую я играю с друзьями.

4. Есть. Если вы хотите использовать jQuery, вы можете использовать функцию .each() . В противном случае Марчин К. написал решение для вас.

5. Определенно собираюсь попробовать его решение позже. К сожалению, я все еще изучаю Javascript, поэтому надеялся, что мое решение будет строго JS, пока я не стану более опытным в нем. Однако приятно знать, что есть способ сделать это позже, и, честно говоря, в будущем, вероятно, придется использовать некоторые jQuery в этом проекте исключительно для возможности просто добавлять файлы в папку вместо изменения кода каждый раз, когда мне нужно добавить новое изображение, так что спасибо. Хотел бы я пометить ваш комментарий как будущий ответ: D

Ответ №1:

Альтернатива для ответа Marcin C с помощью Javascript «только»

 function createImage(){
  var maxImages=5;
  for(var i = 1; i<= maxImages; i  ){
    var img = new Image();
    //You can add any style to the images with "style" or calling a predefined CSS "className"
    img.style = "width:80px;height:80px";
    img.src = "http://website-design-studio.net/finallinkB/wp-content/themes/suffusion/images/"   i  ".jpg";
//instead of "body" you can append to any other element
    document.body.appendChild(img);
  }
}
//Function call
createImage();

Ответ №2:

Получить все divs в массиве, а затем перебирать их, изменяя html следующим образом:

 var generatePhotos = function () { 
var photos = document.getElementsByClassName('photo');

for (var i = 1; i < photos.length; i  ){
  
photos[i].innerHTML = "<img src='http://website-design-studio.net/finallinkB/wp-content/themes/suffusion/images/"   i  ".jpg'>";  
  
}
}

 <div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<button onclick="generatePhotos()"> Generate photos</button>

1. Это выглядит очень многообещающе, мне нужно подождать, пока я не вернусь домой сегодня вечером, но, судя по всему, я, возможно, неправильно отформатировал свой innerHTML. будет обновлено позже сегодня вечером. Я все еще относительный новичок в HTML и javascript, но, похоже, я заключил весь innerHTML в кавычки, не позволяя ему использовать локальную переменную i для получения значения, на которое нужно указать номер изображения.

2. Этот ответ сработал отлично и даже позволил мне с относительной легкостью динамически называть каждую фотографию, я действительно ценю помощь.

3. обратите внимание на типы используемых кавычек: «string» var «string = ‘ string2’ «;