Question

我想点击按钮时打印数组中的下一个项目。它只打印2.我希望它打印2，然后我点击按钮，它应该打印3，然后单击并打印4，依此类推

这是代码：

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>

<body>
    <p>Sample Question</p>
    <div id="results"></div>
    <script type="text/javascript">
        function nextQuestion() {
            var questionArray = [2, 3, 4, 5, 6, 7];
            var arrayLength = questionArray.length;

            for (var i = 1; i < arrayLength; i++) {
                $('#results').html(i);
            }
        }
    </script>
    <input type='button' onClick='nextQuestion();' id='nextquestion' value='Next' />
</body>

Answer 1

HTML：

<h1>Sample Question</h1>
<input type='button' id='nextquestion' value='Next' />
<div id="results"></div>

jQuery的：

var questionStack = [7, 6, 5, 4, 3, 2];

$('#nextquestion').click(function() {
    $('#results').html(questionStack.pop());    
});

<强> DEMO

完整代码：

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>

<body>
    <h1>Sample Question</h1>
    <input type='button' id='nextquestion' value='Next' />
    <div id="results"></div>

    <script type="text/javascript">
        $(document).ready(function() {
            var questionStack = [7, 6, 5, 4, 3, 2];    
            $('#nextquestion').click(function() {
                 $('#results').html(questionStack.pop());    
            });
        });
    </script>   
</body>

Answer 2

实际上你现在打印的内容与你的阵列无关，但与i有关。这里也不需要使用for循环。基本上你需要跟踪指标，然后每次运行函数时将其递增1。这样的事情应该有效。

<script type="text/javascript">
   var counter = 0;
   var questionArray = [2, 3, 4, 5, 6, 7];
    function nextQuestion() {
         $('#results').html(questionArray[counter]);
         counter++
    }
</script>

Answer 3

<强> Demo Fiddle

见这个，

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>

<body>
    <p>Sample Question</p>
    <div id="results"></div>
    <script type="text/javascript">
    var count = 0;

    function nextQuestion() {
        var questionArray = [2, 3, 4, 5, 6, 7];
        var arrayLength = questionArray.length;


        if (count == arrayLength) {
            count = 0;
        }
        $('#results').html(questionArray[count]);
        count++;

    }
    </script>   
</body>

Answer 4

使用module pattern

的另一种方式

var nextQuestion = (function() {
    var questionArray = [2, 3, 4, 5, 6, 7];
    var i = 0;
    return function() {
        $('#results').html(questionArray[i%questionArray.length]);
        i++;
    }
})();

fiddle

按钮点击迭代数组

4 个答案: