Question

这是一个调试问题。我已经google了这个，在第一个（）选择器上检查了jQuery的文档，并阅读了大量的堆栈溢出帖子，但我根据该研究做出的调整都没有奏效。

目标：在下面的代码片段中，我试图从document.ready（）事件顶部使用jquery添加到dom的一系列div中删除第一个“隐藏”类。

    $(document).on('click','#begin',function(){
        $('#intro').addClass('hidden');
        $('#form').removeClass('hidden');
        $('.question').first().css({'visibility':'hidden'});
    });

问题：出于某种原因，当我使用first（）选择器时，所有问题都保持隐藏状态。当我不按预期使用它时，所有问题都会被揭示出来。使用带有“问题”和“隐藏”类的jQuery动态添加这些div。

上面的代码段发生在我附加的示例代码的第50行。这些类的声明发生在第30行。

/**
 * Created by davidgoldberg on 10/16/14.
 */

function Question(topic,question,choices,correctAnswer){
    this.topic = topic;
    this.question = question;
    this.choices = choices;
    this.correctAnswer = correctAnswer;
    this.userAnswer = null;
}

var allQuestions;
allQuestions = [
    new Question("Addition", "What is 8 + 8?", [16, 18, 64, 28], 16),
    new Question("Subtraction", "What is 23-8?", [16, 15, 14, 17], 15),
    new Question("Multiplication", "What is 8 * 8?", [16, 18, 64, 36], 64),
    new Question("Division", "What is 48/16", [3, "3/2", 4, "8/3"], 3),
    new Question("Imaginary Numbers", "What is \u221A(-1)^8?", ["i", "-i", 1, -1], 1)
];


function qToHTML(question) {
    var header = "<h2>" + question.topic + "</h2>";
    var qText = "<p>" + question.question + "</p>";
    var options = "";
    for (var i = 0; i < question.choices.length; i++) {
        options += "<input type='radio' name='" + question.topic + "' value ='" + question.choices[i] + "'>" + question.choices[i] + "<br>";
    }
    var wrapper = "<div class='question'></div>";

    var HTMLstring;
    HTMLstring = header + qText + options;
    $("form").append(HTMLstring).wrap(wrapper);
}



$(document).ready(function(){

    //set up page
    for(var i = 0; i < allQuestions.length; i++){
        qToHTML(allQuestions[i]);
    }
    $('form').append('<input type="submit" value="submit">');
    
    // setup intro
    $(document).on('click','#begin',function(){
        $('#intro').addClass('hidden');
        $('#form').removeClass('hidden');
        $('.question').first().css({'visibility':'hidden'});
    });
    
    // in-form navigation
    $('#next').on('click',function(){

    });

    //collect and check user answers
    $('form').on('submit', function(event) {

        var numCorrect = 0;

        event.preventDefault();

        for(var i = 0; i < allQuestions.length; i++) {

            // collect answers
            var currentQ = allQuestions[i];
            currentQ.userAnswer = $("input[name='" + currentQ.topic + "']:checked").val();

            // check answers
            if (currentQ.correctAnswer == currentQ.userAnswer) {
                numCorrect++;
            }
        }

        // show score
        var score = numCorrect + "/" + allQuestions.length;
        $('#results').find('p').text("You got " + score + " of the questions right");
        $('#results').removeClass('hidden');

        // resets buttons    
        $('input[type="radio"]').each(function(){
            $(this).prop('checked', false);
        });
    });
});

.hidden {
    display: none;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Dynamic Quiz</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <h1>Dynamic Quiz</h1>
        
        <div id='intro'>
            <h3>Get ready for the dynamic quiz</h3>
            <p>You will be asked a questions from a range of different math subjects.  Selecting an answer will bring you to the next page.  The 'next' and 'back' buttons do just what you expect.  When you are finished, click the 'submit' button at the bottom of the page, and you will be directed to your score.  When you are ready, click the 'begin' button below.</p>
            <input type="button" id="begin" value="begin">
        </div>

        <div id='form' class='hidden'>
            <form>
                    
                  <!-- <div class="question hidden">
                        <h2></h2>
                        <p></p>
                        <input type="radio" name="" value="">
                        <input type="radio" name="" value="">
                        <input type="radio" name="" value="">
                        <input type="radio" name="" value="">
                       
                        <input type="submit" value="submit">
                    </div> -->
                
            </form>
            <span id="nav-buttons">
                <button id="previous">previous</button>
                <button id="next">next</button>
            </span>

        </div>
        <div id="results" class="hidden">
            <h2>Results:</h2>
            <p></p>
        </div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="script.js"></script>
    </body>
</html>

Answer 1

考虑使用jQuery库中的next（）和prev（）以及当前可见元素的类。例如，下面有class="visibleQuestion"的当前可见元素：

$('#next').on('click', function(){
    var v = $(".visibleQuestion");
    v.next().addClass("visibleQuestion").show();
    v.removeClass("visibleQuestion").hide();
});

上面的伪代码，但可能会给你一些想法。

这里有一个简单的例子：http://jsfiddle.net/fmj34ejg/

Answer 2

正如我在上面的代码段中所做的那样，选择了班级中的第一个元素。问题不在于类选择机制 - 这是javascript函数中的一个产生问题的错误。

有一个错误阻止我选择班级中的第一个元素。在本段后面的函数中，.wrap（包装器）调用包装＆＃34;形式＆＃34; div中的元素与class =＆＃34; question＆＃34; - 不是我想要的个别问题。

function qToHTML(question) {
    var header = "<h2>" + question.topic + "</h2>";
    var qText = "<p>" + question.question + "</p>";
    var options = "";
    for (var i = 0; i < question.choices.length; i++) {
        options += "<input type='radio' name='" + question.topic + "' value ='" + question.choices[i] + "'>" + question.choices[i] + "<br>";
    }
    var wrapper = "<div class='question'></div>";

    var HTMLstring;
    HTMLstring = header + qText + options;
    $("form").append(HTMLstring).wrap(wrapper);
}

以下是修订后的功能：

功能qToHTML（问题）{

var header = "<h2>" + question.topic + "</h2>";
var qText = "<p>" + question.question + "</p>";
var options = "";
for (var i = 0; i < question.choices.length; i++) {
    options += "<input type='radio' name='" + question.topic + "' value ='" + question.choices[i] + "'>" + question.choices[i] + "<br>";
}

var HTMLstring;
HTMLstring = header + qText + options;
HTMLstring = "<div class='question hidden'>" + HTMLstring + "</div>";
$("form").prepend(HTMLstring);

}

如何使用jquery选择给定类的第一个元素？

2 个答案: