Как я могу выводить содержимое массива в контейнер HTML div?

Question

Я пытаюсь вывести содержимое массива в контейнер div в моем html-файле, но я в тупике. Вот что у меня есть:

function change_string() { 
    var $container = $('.container'); 
    $container.html(''); 

    var myString= streams.home[myStringNo]; 
    var $myString= $('<div></div>'); 

    $myString.text('@' + myString.user + ': ' + myString.message + 'Generated:  ' + timeStamp); 
    $myString.appendTo($container); 

    myStringNo ++; 
}; 

Линия: $ myString.appendTo ($ container); показывает одну строку для каждой кнопки мыши, которая заключается в следующем:

<INPUT type="button" value="See next Random String" name="button1" onClick="change_string()"> <br> 

Как я

A) Выходные содержимое моего массива вместо одной строки в контейнере

и

B) Как я могу ссылаться на каждую другую кнопку на моей странице? Все остальные кнопки, как это, и я в моих точках блокирующими:

<INPUT type="button" value="See strings for jmcgui05" name="button2" onClick="change_string()"> <br> 

В основном, когда button2 щелкают, контейнер должен быть заполнен строками для user2.

Answer 1

Для вашего первого вопроса, то вы можете вывести содержимое массива с помощью .each() функции JQuery в.Вы в основном цикл через массив и конкатенация строк вместе:

function output_strings(source_array) 
{  
    var container = $('.container'); 
    var output = ""; 

    $.each(source_array, function(i, string) { 
     output += string + ' '; 
    }); 

    container.text(output); 
} 

Для вашего второго вопроса, «Как я могу ссылаться на каждую другую кнопку на моей странице?» Лучший способ сделать это, чтобы дать каждой кнопке уникальный атрибут ID:

<button id="button_1">Button One</button> 

И затем использовать JQuery, чтобы настроить приемник для этой конкретной кнопки:

$('#button_1').on('click', function(){ 
    // Do something 
}); 

я собрал jsFiddle демо эти понятия. И here являются документами для функции .each(). Надеюсь, поможет!

Answer 2

Вы можете перебирать каждый объект в своем массиве streams.home[messageNumber] с помощью метода $.each() jQuery. Причина использования этого метода javascript в array.forEach в основном заключается в обеспечении совместимости между браузерами.

HTML

<input type='button' class='message-btn' value='...' name='...' /> 

JS

var messageNumber = 0; 

$(function() { 
    $('.message-btn').click(function() { 

     var messageLines = []; 
     $.each(streams.home[messageNumber], function(i, message) { 
      messageLines.push([ 
       '<div>', 
       '@', stream.user, ': ', 
       stream.message, 
       'Generated:  ', 
       timeStamp, 
       '</div>' 
      ].join('')); 
     }); 

     $container.append(messageLines.join('')); 

     messageNumber++; 
    }); 
}); 

Некоторые замечания о стиле

1. Scrap инлайн Javascript и использовать обработчик событий JQuery в. Таким образом, вам не нужно вручную привязывать атрибут onclick к каждой из ваших кнопок.

2. Используйте [string1, строка2, string3 ..., stringN] .join (''); для конкатенации строк; его намного эффективнее в javascript и легче читать и управлять. :]

3. Постарайтесь быть более краткими в своих переменных именах. Вы должны попытаться вырвать «мой» префикс и просто позвонить myString что-то вроде messageText. Это не только облегчит вам задачу, но и облегчит людям, которые пытаются помочь вам.

4. Кроме того, в будущем попробуйте сохранить свой формат кода, чтобы люди могли вам помочь.

Приветствия

Answer 3

Важной частью JavaScript вы указали, что вам нужны глобальные переменные для хранения на индекс, домашний хэш и т.д. Попробуйте это:

var myStringNo = 0; 
 
var homeArray = []; 
 
for (var i = 1; i <= 10; i++) { 
 
    homeArray.push({user: "User " + i, message: "Message " + i}); 
 
} 
 
var streams = { 
 
    home: homeArray  
 
}; 
 

 
window.change_string = function() { 
 
    var $container = $('.container'); 
 
    $container.html(''); 
 

 
    var myString = streams.home[myStringNo % streams.home.length]; 
 
    var $myString = $('<div></div>'); 
 

 
    $myString.text('@' + myString.user + ': ' + myString.message + ', Generated:  ' + new Date().getTime()); 
 
    $myString.appendTo($container); 
 
    myStringNo++; 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<INPUT type="button" value="See next Random String" name="button1" onClick="change_string()"> 
 
<br> 
 
<div class="container"></div>

И если вы хотите чтобы это было действительно случайным, замените

var myString = streams.home[myStringNo % streams.home.length]; 

с

var myString = streams.home[Math.floor(streams.home.length * Math.random())];