2

我正在做一些非常简单的事情，一个简短的测验，我试图让我在二维数组中列出的项目每个显示为<li>. 我尝试使用 JSarray.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();
        }

    }); 
});
4

2 回答 2

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将这段文本添加到标签的开头，或者创建一个新元素来保存这段文本。

于 2013-10-28T02:43:08.517 回答
1

尝试

<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();
        }
    });
    //
});

演示：小提琴

于 2013-10-28T02:44:38.000 回答