二维数组 - Jquery 移动

Question

我们在 class 的 jquery mobile 开始编程，我们一直在创建一个查找异常的小测验程序。我只是不明白为什么我不能移动到数组中的下一个答案。我的意思是我在选项中只看到前 4 个答案 ("winter","autumn","summer","sunday") 当我运行它在 VS 中 chrome 浏览器.

HTML

    <!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="js/JavaScript.js"></script>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "//hm.baidu.com/hm.js?73c27e26f610eb3c9f3feb0c75b03925";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>
<body>

    <div data-role="page" id="pageone">
        <div data-role="header" data-theme="b">
            Wellcome to our exceptional quizer
        </div>
        <div data-role="main" class="ui-content">
            <a href="#pagetwo" data-transition="slidedown">Click to start!</a>
        </div>
        <div data-role="footer">
            TELEM 2017
        </div>
    </div>


    <div data-role="page" id="pagetwo">
        <div data-role="header" data-theme="b">
            Wellcome to our exceptional quizer
        </div>
        <div data-role="main" class="ui-content">

            <p>which of the following is an exception</p>

            <select name="select-choice-1" id="select-choice-1">
                <option>choose an answer</option>
                <option id="op1" value="1"></option>
                <option id="op2" value="2"></option>
                <option id="op3" value="3"></option>
                <option id="op4" value="4"></option>
            </select><br />
            <input id="Button1" type="button" value="check" data-icon="check"/><br />
            <div id="myfeedback"></div>



        </div>
        <div data-role="footer">


TELEM 2017
    </div>
</div>

Jquery

    $(document).ready(function () {

    var items=[["winter","autumn","summer","sunday","4"],["plant","table","glass","bed","1"],["apple","banana","tomato","potato","4"]]
    var questionNum = 0;
    var itemsNum = 0;

    $("#op1").html(items[questionNum][0]);
    $("#op2").html(items[questionNum][1]);
    $("#op3").html(items[questionNum][2]);
    $("#op4").html(items[questionNum][3]);
    var checkCorrect= $(items).val(items[questionNum][4]);


    $("#Button1").click(function () {
        var marker = "";
        for (var i=1;i<5;i++)
        {
            var myOption = document.getElementById("op" + i.toString());
            if (myOption.selected)
            {
                marker = i.toString();
            }
        }
        if (marker == items[questionNum][4])
        {
            questionNum++;
        }
        else
        {

        }

    });

});

Answer 1

$(document).ready();的内容只执行一次。这就是为什么你不能继续前进。在 click 之后设置 #opts 可以解决您的问题。

$(document).ready(function() {
    var items = [
        ["winter", "autumn", "summer", "sunday", "4"],
        ["plant", "table", "glass", "bed", "1"],
        ["apple", "banana", "tomato", "potato", "4"]
    ];
    var questionNum = 0;
    var itemsNum = 0;
    var checkCorrect;

    function updateStuff() {
        $("#op1").html(items[questionNum][0]);
        $("#op2").html(items[questionNum][1]);
        $("#op3").html(items[questionNum][2]);
        $("#op4").html(items[questionNum][3]);
        checkCorrect = $(items).val(items[questionNum][4]);
    }
    updateStuff();

    $("#Button1").click(function() {
        var marker = "";
        for (var i = 1; i < 5; i++) {
            var myOption = document.getElementById("op" + i.toString());
            if (myOption.selected) {
                marker = i.toString();
            }
        }
        if (marker == items[questionNum][4]) {
            questionNum++;
        } else {
            alert('Incorrect.');
        }

        updateStuff();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-role="page" id="pageone">
    <div data-role="header" data-theme="b">
        Wellcome to our exceptional quizer
    </div>
    <div data-role="main" class="ui-content">
        <a href="#pagetwo" data-transition="slidedown">Click to start!</a>
    </div>
    <div data-role="footer">
        TELEM 2017
    </div>
</div>
<div data-role="page" id="pagetwo">
    <div data-role="header" data-theme="b">
        Wellcome to our exceptional quizer
    </div>
    <div data-role="main" class="ui-content">
        <p>which of the following is an exception</p>
        <select name="select-choice-1" id="select-choice-1">
            <option>choose an answer</option>
            <option id="op1" value="1"></option>
            <option id="op2" value="2"></option>
            <option id="op3" value="3"></option>
            <option id="op4" value="4"></option>
        </select>
        <br />
        <input id="Button1" type="button" value="check" data-icon="check" />
        <br />
        <div id="myfeedback"></div>
    </div>
    <div data-role="footer">
        TELEM 2017
    </div>
</div>

二维数组 - Jquery 移动

2D array - Jquery mobile

arrays

jquery

jquery-mobile