0

我试图用 html css 和 jquery 进行动态测验，当我尝试<p id=question></P>使用 jquery 更改时没有任何反应，我给你留下了我的 html 和 jquery 代码。

<!DOCTYPE html>
<html lang='es'>
<head>
<meta charset='UTF-8'>
<title>Dynamic Quiz</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/prefixfree.js"></script>
<script type="text/javascript" src="js/codigo.js"></script>
</head>
<body>
<header>
    <hgroup>
        <h1>This is my Dynamic Quiz</h1>
        <h2>Using html5 / css / javascript</h2>
    </hgruop>
</header>

<section id='description'>
    <p>This quiz is compossed by 10 questions, you have to answer at least 7
       from 10 to pass the exam.</p>
    <h2>Lets start!</h2>
</section>

<div id='questions-number'>
    <p>Question <span id='current-question'>1</span> of <span>10</span> </p>
</div>

<section id='questions'>
    <p id='question'></p>

    <ul>
        <li><input type='checkbox' /><label>answer0</label></li>
        <li><input type='checkbox' /><label>answer1</label></li>
        <li><input type='checkbox' /><label>answer2</label></li>
        <li><input type='checkbox' /><label>answer3</label></li>
    </ul>
</section>

<div id='next'>
    next
</div>
</body>
</html>

这是我的jQuery代码....

$(document).on('ready', ready);
function ready(){
var allQuestions =
[
    {
        question1: "Whats my real name?",
        choices1: ["Jhonnatan", "Alberto", "Tatan","Jaime"],
        answer1: 0
    },

    {
        question2: "Who is Colombia's president?",
        choices2: ["Alvaro Uribe", "Andres Pastrana", "Juan Manuel Santos","Tatan"],
        answer2: 2
    },

    {
        question3: "My favorite super heroe?",
        choices3: ["Batman", "Flash", "Tatan","Javascript"],
        answer3: 3
    },

    {
        question4: "Wich sports do i practice?",
        choices4: ["Climbing", "Swimming", "Programming","Running"],
        answer4: 0
    },

    {
        question5: "Whats my dad's name?",
        choices5: ["Alberto", "Jorge", "Javier","Jose"],
        answer5: 1
    },

    {
        question6: "Whats my favorite color?",
        choices6: ["Red", "Purple", "Blue","All"],
        answer6: 2
    },

    {
        question7: "My favorite alcoholic drink",
        choices7: ["Vodka", "Aguardiente", "Rum","Tekila"],
        answer7: 3
    },

    {
        question8: "Whats my favorite kind of music?",
        choices8: ["Hardcore", "Reggaeton", "Salsa","Programming"],
        answer8: 0
    },

    {
        question9: "How many qestions has this quiz??",
        choices9: ["20", "8", "10","12"],
        answer9: 2
    },

    {
        question10: "My favorite programming lenguage?",
        choices10: ["Ruby", "Arduino", "Python","Javascript"],
        answer10: 3
    }
];
$('question').text('hola mundo!');
console.log($('question'));

}

我有一个里面有对象的数组，每个对象都包含问题、可能的答案和正确的答案，我喜欢用 jquery 将所有这些动态添加到我的 html 中，当按下下一个按钮更改问题时，如果有人可以帮助我，我将不胜感激

4

3 回答 3

1

question不是一个元素，它是一个 ID。要选择 ID，您将使用#.

要解决此问题，只需更改$('question')为$('#question').

于 2013-03-28T22:31:52.337 回答
1

您缺少 id 选择器。尝试：

$("#question").text("hola mundo!");
于 2013-03-28T22:32:03.767 回答
0

您需要使用$('#question')通过 ID 引用元素。只是$('question')用于类似的元素<question></question>，并且 $('.question')用于类。

于 2013-03-28T22:33:51.110 回答