JavaScript Foreach Array Ключевые значения, вывод в HTML -- javascript поле с участием arrays поле с участием for-loop пол Связанный проблема

Javascript foreach array key values, output to html


0
vote

проблема

русский

Как сердите к клавишам ARRAY THRU, чтобы вывести свои значения в HTML?

Расположение Я работаю, - это миниатюрная сетка, 3 колонны на 2 ряда. Каждый миниатюр имеет подпись под ним. Выбор любого из миниатюр открывает скрытый контейнер, который также является сеткой из 3 колонн и 2 строк. В рамках этого скрытого контейнера многие изображения и подписи будут одинаковыми так вместо того, чтобы иметь целую кучу дубликатов HTML, я подумал, что могу просто хранить каждый в массиве и ссылаться на значения, с которыми связаны значения. Я просто застрял, как создать петлю в данный момент.

 <код> var img=[     'image01.jpg','image02.jpg','image03.jpg','image04.jpg' ] var details=[     'aaaaaa','bbbbbb','cccccc','dddddd' ];  $( "#yin" ).click(function() {     var img = [0,2];             var details = [0,1];      $(step).each(function() {         document.getElementById("img").innerHTML();     });     $(imgs).each(function() {         document.getElementById("img").innerHTML();     }); });   <div class="container">     <ul class="row-fluid">         <li class="span4" id="yin">             <div class="row-fluid">                 <img src="yin.jpg" />                 <h3>Yin</h3>             </div>         </li>         <li class="span4" id="yang">             <div class="row-fluid">                 <img src="yang.jpg" />                 <h3>Yang</h3>             </div>         </li>     </ul>     <div class="row-fluid">         <div class="span12">             <div class="show-details details">                 <div class="detail-content">                      <div id="img">                     <!-- Loop (for yin would be image01, and image03) -->                     </div>                     <div id="details">                     <!-- Loop (for yin would be 'aaaaaa','bbbbbb') -->                     </div>                 </div>             </div>         </div>     </div> </div>   
Английский оригинал

How do I loop thru array keys to output their values to HTML?

The layout I'm working with is a thumbnail grid, 3 columns by 2 rows. Each thumbnail has a caption below it. Selecting any of the thumbnails opens up a hidden container which is also a grid of 3 columns and 2 rows. Within that hidden container many of the images and captions are going to be identical so rather than have a whole bunch of duplicate HTML I figured I could just store each in an array and reference the values that each is associated with. I'm just stuck on how to create the loop at the moment.

var img=[     'image01.jpg','image02.jpg','image03.jpg','image04.jpg' ] var details=[     'aaaaaa','bbbbbb','cccccc','dddddd' ];  $( "#yin" ).click(function() {     var img = [0,2];             var details = [0,1];      $(step).each(function() {         document.getElementById("img").innerHTML();     });     $(imgs).each(function() {         document.getElementById("img").innerHTML();     }); });   <div class="container">     <ul class="row-fluid">         <li class="span4" id="yin">             <div class="row-fluid">                 <img src="yin.jpg" />                 <h3>Yin</h3>             </div>         </li>         <li class="span4" id="yang">             <div class="row-fluid">                 <img src="yang.jpg" />                 <h3>Yang</h3>             </div>         </li>     </ul>     <div class="row-fluid">         <div class="span12">             <div class="show-details details">                 <div class="detail-content">                      <div id="img">                     <!-- Loop (for yin would be image01, and image03) -->                     </div>                     <div id="details">                     <!-- Loop (for yin would be 'aaaaaa','bbbbbb') -->                     </div>                 </div>             </div>         </div>     </div> </div> 
</div
        
 
 

Список ответов

0
 
vote
vote
Лучший ответ
 
<Р> Там есть проблема с этим кодом, прежде чем попасть в цикл, то <код> DelegatingAuthenticationProviderEndpoint0 и <код> DelegatingAuthenticationProviderEndpoint1 переменные быть повторно объявлены внутри вашей функции мыши. Что они предназначены быть? Из комментариев в коде они, как представляется, с указанием, какие индексы массива для использования.
 <код> DelegatingAuthenticationProviderEndpoint2  
<Р> Я хотел бы взять на себя функцию щелчка выписанный на имя функции, хотя и просто передать в массивах.
 

There's an issue with that code before you get into looping, the img and details variables are being re-declared inside your click function. What are they intended to be? From the comments in your code they seem to be specifying which indices of the array to use.

var images = ['image01.jpg','image02.jpg','image03.jpg','image04.jpg']; var details = ['aaaaaa','bbbbbb','cccccc','dddddd'];  $( "#yin" ).click(function() {     var imgIndices = [0,2];     var detailIndices = [0,1];      $("#img").html("");     $("#details").html("");      $(imgIndices).each(function(i, o) {         $("#img").append("<img src="" + images[o] + ""/>");     });     $(detailIndices).each(function(i, o) {         $("#details").append("<p>" + details[o] + "</p>");     }); });   <div class="container">     <ul class="row-fluid">         <li class="span4" id="yin">             <div class="row-fluid">                 <img src="yin.jpg" />                 <h3>Yin</h3>             </div>         </li>         <li class="span4" id="yang">             <div class="row-fluid">                 <img src="yang.jpg" />                 <h3>Yang</h3>             </div>         </li>     </ul>     <div class="row-fluid">         <div class="span12">             <div class="show-details details">                 <div class="detail-content">                      <div id="img">                     <!-- Loop (for yin would be image01, and image03) -->                     </div>                     <div id="details">                     <!-- Loop (for yin would be 'aaaaaa','bbbbbb') -->                     </div>                 </div>             </div>         </div>     </div> </div> 

I would take the click function out to a named function though and just pass in the arrays.

</div
 
 
 
 

Связанный проблема

30  Как я могу использовать Nodejs с Windows 7? [закрыто]  ( How can i use nodejs with windows 7 ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> <Путь d = "M15 6.38A6.48 6.48 0 007.78. 04H-.02A6.49 6.49 0 002.05 ...

0  Как закрыть всплывающее окно, когда видео YouTube играет на кнопке кнопки ESC?  ( How to close popup when youtube video is playing on esc button button ) 
Нажмите меня, чтобы увидеть демонстрацию Когда видео не играет, то кнопка ESC нажала всплывающее окно, но он не работает при воспроизведении видео. ...

0  Обновление происхождения перетаскивания / прокрутки после обновления данных с переходом в D3  ( Update drag scroll origin after an update of the data with transition in d3 ) 
Я работаю на диаграмме с перетаскиванием, масштабированием и обновлениями. Это в основном работает, однако, после добавления новых данных позиция перетаскиван...

0  Сортировка не работает в смарт-таблице угловой JS  ( Sorting is not working in smart table angular js ) 
Сортировка смарт-таблицы не работает по какой-то причине после использования в качестве пользовательской директивы. Можете ли вы помочь мне, что я сделал не т...

0  .append () элемент с более чем одним классом  ( Append element with more than one class ) 
Я не могу найти информацию о том, можно ли использовать .append (), чтобы добавить элемент в HTML и дать этому элементу более одного класса <код> $( ".nav"...

0  Кнопка CKeditor 4 Не отображается  ( Ckeditor 4 underline button not showing ) 
Это мой код JavaScript для конфигурации моего CKEDITOR. Я нахожу на браузере для этого решения, но я не могу найти никакого решения даже на официальном сайте ...

1  JavaScript не работает над динамическим контентом  ( Javascript not working on dynamic content ) 
У меня есть страница, где в HTML Div загружен с другой страницы. На родительской странице у меня есть JavaScript, который имеет элементы, которые применяются ...

1  JavaScript: Получение идентификатора родителя из документа  ( Javascript getting the id of the parent from a document ) 
У меня возникли проблемы с тем, чтобы получить идентификатор родителя документа, который здесь «iFrame1». Как вы можете видеть, что JavaScript должен проживат...

4  Является ли хорошей идеей использовать условные зависимости в модулях AMD?  ( Is it a good idea to use conditional dependencies in amd modules ) 
Я думаю об использовании условий для указания модуля зависит в модульной системе AMD. Например, чтобы загрузить библиотеку на браузере и библиотеку на сервере...

0  Новое развитие приложений с использованием Cordova и Ionic  ( Native app development using cordova and ionic ) 
Как сохранить процесс или сервис всегда запущены даже после того, как приложение будет убито пользователем, похожее на секундомер, который будет запущен даже ...

1  Форма подписки Rapidmail перенаправляет после подписки электронной почты - MailChimp  ( Rapidmail subscription form redirect after email subscription mailchimp ) 
Я создаю веб-страницу, которая включает в себя очень простую форму подписки, в основном собирая адреса электронной почты, заинтересованные в продукте. Для это...

0  Команда STEART BOBLE не работает, когда добавляю новый файл JS  ( Stencil bundle command is not working when i add new js file ) 
Я добавил несколько файлов JS в моей теме (Track-CLI), а когда я запускаю stencil bundle COMMENT, ошибки JS получили бросок. Я пробовал удаление <код> app...

59  Дисплей Div в положении курсора в Textarea [дубликат]  ( Display div at cursor position in textarea ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

0  JavaScript Ball Collision  ( Javascript ball collision ) 
Я пытаюсь создать простую игру JavaScript с простыми физиками. Я могу определить, когда 2 шарика столкнулись, но у меня возникли проблемы с обработкой столкно...

0  Отображать имя страницы в JavaScript?  ( Display page name in javascript ) 
Как бы я добавил <код> location.href.split('/').pop() к документу HTML для отображения имени страницы? (Не весь URL) я хотел бы отобразить только имя страниц...

Связанный проблема

30  Как я могу использовать Nodejs с Windows 7? [закрыто] 
0  Как закрыть всплывающее окно, когда видео YouTube играет на кнопке кнопки ESC? 
0  Обновление происхождения перетаскивания / прокрутки после обновления данных с переходом в D3 
0  Сортировка не работает в смарт-таблице угловой JS 
0  .append () элемент с более чем одним классом 
0  Кнопка CKeditor 4 Не отображается 
1  JavaScript не работает над динамическим контентом 
1  JavaScript: Получение идентификатора родителя из документа 
4  Является ли хорошей идеей использовать условные зависимости в модулях AMD? 
0  Новое развитие приложений с использованием Cordova и Ionic 
1  Форма подписки Rapidmail перенаправляет после подписки электронной почты - MailChimp 
0  Команда STEART BOBLE не работает, когда добавляю новый файл JS 
59  Дисплей Div в положении курсора в Textarea [дубликат] 
0  JavaScript Ball Collision 
0  Отображать имя страницы в JavaScript? 



© 2021 www.qaru.top All Rights Reserved. Q&A House все права защищены


Licensed under cc by-sa 3.0 with attribution required.