Question

我想为我的女儿们创建一种乘法测验网页，他们只需要在文本框中输入数字，然后点击按钮。如果文本框中的数字是正确的答案，我希望页面显示一条消息：CORRECT！网页中的消息不是问题，我可以处理，但我正在寻找的我没有发现它是我希望他们输入支持的数字。例如：

（此[ _ _ ]模拟文本框）
（这██模拟一个按钮）

我写道： 2 x 2 = [ _ _ ]██

在上面的示例中，他们必须在文本框中键入“4”（不带引号），当按下按钮（按钮值为：CHECK ANSWER）时，数学练习的上方说：正确！如果他们输入的其他数字不是“4”（没有引号），我想要一条消息警告说：不正确！

我想将这个应用于所有表2：

2 x 2 = [ _ _ ]██

2 x 3 = [ _ _ ]██

2 x 4 = [ _ _ ]██

以及所有表3,4,5,6,7,8,9,10,11,12。

我希望每个按钮都与其相应的文本框进行交互。谢谢。： - ）

Answer 1

以下是您提出的问题：

$(document).ready(function() {

    var START_TABLE = 1;
    var END_TABLE = 9;
    var START_MULTIPLIER = 1;
    var END_MULTIPLIER = 9;

    var $quiz = $('#quiz');
    var html = [];

    for (var i = START_TABLE; i <= END_TABLE; i++) {
        html.push('<div class="block">');
        for (var j = START_MULTIPLIER; j <= END_MULTIPLIER; j++) {
            html.push(
                '<p>' +
                    '<span class="i">' + i + '</span>' +
                    ' x ' +
                    '<span class="j">' + j + '</span>' +
                    ' = ' +
                    '<input type="text" class="res">' +
                    '<button class="check">Check!</button>' +
                '</p>'
            );
        }
        html.push('</div>');
    }
    $quiz.html(html.join(''));

    $quiz.on('click', 'button.check', function() {
        var $p = $(this).parent('p');
        var res = parseInt($p.find('.res').val());
        var i = +$p.find('.i').text();
        var j = +$p.find('.j').text();

        if (res == i * j) {
            alert('Correct!');
        } else {
            alert('Incorrect!');
        }
    });
});

在您的<body>：

中

<div id="quiz">
</div>

工作演示：http://jsfiddle.net/Cp8rY/1/

我已经使用过jQuery，所以不要忘记将其包含在您的网页上（或修改代码以免使用它）。

但是，请在将来不要让别人在你的地方写下所有代码：https://stackoverflow.com/help/on-topic

如果文本框具有正确的值，则onclick按钮，同一页面上的消息，如果没有消息警报

1 个答案: