Question

我正在做一些非常简单的事情，一个简短的测验，我试图让我在二维数组中列出的项目每个显示为<li>。我尝试使用JS array.join()方法，但它并没有真正做到我想要的。我想将它们放入列表中，然后为每个列表添加一个单选按钮。

我已经对Jquery进行了一次小小的飞跃，所以很多这是我对“语法”的不熟悉。我在他们的API上浏览了一些内容，$.each ......？我确信这就像for语句一样，我不能让它工作而不会崩溃我所拥有的一切。

这是HTML非常有趣的东西。

<div id="main_">
    <div class="facts_div">
        <ul>            
        </ul>
    </div>
    <form>
        <input id="x" type="button" class="myBtn" value="Press Me">
    </form>
</div>

而且，这里有一些非常复杂的代码。抓住你的帽子......

$(document).ready (function () {
    var array = [["Fee","Fi","Fo"], 
    ["La","Dee","Da"]];
    var q = ["<li>Fee-ing?","La-ing?</li>"];


    var counter = 0;

    $('.myBtn').on('click', function () {
        $('#main_ .facts_div').text(q[counter]);
        $('.facts_div ul').append('<input type= "radio">' 
            + array[counter]);
        counter++;

        if (counter > q.length) {
            $('#main_ .facts_div').text('You are done with the quiz.');
            $('.myBtn').hide();
        }

    }); 
});

Answer 1

您可以使用$.each来迭代array[counter]并为您的选项创建li元素：

var list = $('.facts_div ul');
$.each(array[counter], function() {
    $('<li></li>').html('<input type="radio" /> ' + this).appendTo(list);
}

第一个参数是您的数组，第二个参数是执行操作的匿名函数，其中this将保存当前元素值。

另外，如果你这样做：

$('#main_ .facts_div').text(q[counter]);

您将使用q[counter]替换元素的内容，并在其中丢失ul标记。在这种情况下，您可以使用prepend方法而不是text将此文本添加到代码的开头，或者创建一个新元素来保存此文本。

Answer 2

尝试

<div id="main_">
    <div class="facts_div"> <span class="question"></span>

        <ul></ul>
    </div>
    <form>
        <input id="x" type="button" class="myBtn" value="Press Me" />
    </form>
</div>

和

jQuery(function ($) {
    //

    var array = [
        ["Fee", "Fi", "Fo"],
        ["La", "Dee", "Da"]
    ];
    var q = ["Fee-ing?", "La-ing?"];


    var counter = 0;

    //cache all the possible values since they are requested multiple times
    var $facts = $('#main_ .facts_div'),
        $question = $facts.find('.question'),
        $ul = $facts.find('ul'),
        $btn = $('.myBtn');

    $btn.on('click', function () {
        //display the question details only of it is available
        if (counter < q.length) {
            $question.text(q[counter]);

            //create a single string containing all the anwers for the given question - look at the documentation for jQuery.map for details 
            var ansstring = $.map(array[counter], function (value) {
                return '<li><input type="radio" name="ans"/>' + value + '</li>'
            }).join('');
            $ul.html(ansstring);

            counter++;
        } else {
            $facts.text('You are done with the quiz.');
            $(this).hide();
        }
    });
    //
});

演示：Fiddle

如何将数组项添加到<li> Jquery </li>

2 个答案: