Question

I am trying to output the contents of an array to a div container on my html file but I am stumped. Here is what I have:

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 ++;
};

The line: $myString.appendTo($container); shows a single string per button click, which is this:

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

How do I

A) Output contents of my array instead of a single string in the container

and

B) How do I reference each different button on my page? All other buttons are like this, and I am at my blocking point:

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

Basically, for when button2 is clicked, the container should be populated with the strings for user2.

Answer 1

您可以使用jQuery的streams.home[messageNumber]方法迭代$.each()数组中的每个对象。通过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++;
    });
});

关于风格的一些注释

废弃内联javascript并使用jQuery的事件处理程序。这样您就不必手动将onclick属性附加到每个按钮上。
使用[ string1 ， string2 ， string3 ，...， stringN ]。（＆＃39;＆＃39）;用于连接字符串;它在javascript中更有效率，更易于阅读和管理。：
尝试在变量命名中更简洁。你应该试着抛弃我的＆＃39;前缀，只需拨打myString之类的messageText。它不仅可以让您更轻松，还可以让那些想帮助您的人更轻松。
此外，将来，请尽量保持您的代码格式清洁，以便人们可以更轻松地帮助您。

干杯

Answer 2

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

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

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

    container.text(output);
}

对于您的第二个问题，＆＃34;如何引用我页面上的每个不同按钮？＆＃34;执行此操作的最佳方法是为每个按钮指定唯一的ID属性：

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

然后使用jQuery为该特定按钮设置一个监听器：

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

我整理了一个jsFiddle来演示这些概念。 here是.each()函数的文档。{{3}}是www.example.com/yy?q=how+can+i+get+this&o=1&source=home函数的文档。希望它有所帮助！

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())];

How can I output contents of an array to a HTML div container?

3 个答案: