javascript - 如何将数组的内容输出到 HTML div 容器？

Question

我试图将数组的内容输出到 html 文件上的 div 容器，但我被难住了。这是我所拥有的:

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

对于第一个问题，您可以使用 jQuery 的 .each() 函数输出数组的内容。您基本上循环遍历数组并将字符串连接在一起:

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() 函数的文档。希望对您有帮助!