Question

两个按钮从一个问题移到另一个问题，我的变量＆＃34;实际＆＃34;记得我在说什么问题。我想在屏幕上以div显示这个数字。目前没有任何内容出现，也没有错误。

<script type="text/javascript">
    var actual = 0; // select by default the first question

    $(document).ready(function() {
        var number_of_question = $('.question').length; // get number of questions
        $('.question:gt(' + actual + ')').hide(); // Hide unselect question

        $('#nextQ').click(function() {
            if (actual < number_of_question - 1) {
                changeQuestion(actual + 1); // display select question
            }
        });
        $('#forwardQ').click(function() {
            if (actual) {
                changeQuestion(actual - 1); // display select question
            }
        });
    });

    function changeQuestion(newQuestion) {
        $('.question:eq(' + actual + ')').hide(); // hide current  question
        $('.question:eq(' + newQuestion + ')').show(); // show new question
        actual = newQuestion; // memorize actual selection
        //alert(actual);
    }

    $('#question_number').html(actual);
</script>

<div class="digit" id="question_number"></div>

Answer 1

您应该将<div class="digit" id="question_number"></div>放在<script>之前。因为你试图改变尚未初始化的元素的内容。

Answer 2

我建议将其放在外部文件中，并将其包含在页面底部，如此。

 <div class="digit" id="question_number"></div>

 <script src="/path/to/script.js"></script>

或者如果您需要内联，只需在html后添加<script>标记即可。

<div class="digit" id="question_number"></div>

<script type="text/javascript">
var actual = 0; // select by default the first question


$(document).ready(function() {
var number_of_question = $('.question').length; // get number of questions

$('.question:gt(' + actual + ')').hide(); // Hide unselect question
$('#nextQ').click(function() {
if(actual < number_of_question - 1 ) {
    changeQuestion(actual + 1); // display select question

}
});
$('#forwardQ').click(function() {

if(actual) {
changeQuestion(actual - 1); // display select question

}
});
});

function changeQuestion( newQuestion ) {
$('.question:eq(' + actual +')').hide(); // hide current  question
$('.question:eq(' + newQuestion +')').show();   // show new question
actual = newQuestion; // memorize actual selection
//alert(actual);
}

$('#question_number').html(actual);
</script>

Answer 3

如果你把你的$（'＃question_number'）放进去.html（实际）;在changeQuestion方法中。这样，当按下NEXT或PREVIOUS按钮时，您将更新当前的问题编号。

var actual = 0; // select by default the first question

$(document).ready(function() {
    var number_of_question = $('.question').length; // get number of questions
    $('.question:gt(' + actual + ')').hide(); // Hide unselect question

    $('#nextQ').click(function() {
        if (actual < number_of_question - 1) {
            changeQuestion(actual + 1); // display select question
        }
    });
    $('#previousQ').click(function() {
        if (actual) {
            changeQuestion(actual - 1); // display select question
        }
    });
});

function changeQuestion(newQuestion) {
    $('.question:eq(' + actual + ')').hide(); // hide current  question
    $('.question:eq(' + newQuestion + ')').show(); // show new question
    actual = newQuestion; // memorize actual selection
    $('#question_number').html(actual);
    alert(actual);
}

请检查我的Pluker here。

希望这有帮助。

如何在屏幕上显示一个JavaScript变量的数字？

3 个答案: