Question

我无法真正让我的jQuery函数按照预期进行合作，我得到的唯一console.log就是这个

未捕获的ReferenceError：未定义测验

我已经四处了解如何从函数中正确调用函数，我会说我从中得到了结果。

这是我的代码

HTML

<!doctype html>
<html>
<head>
      <meta charset="utf-8">
      <title>Quizinator!</title>
      <link href="css/main.css" rel="stylesheet">
      <script src="js/jquery.js" type="text/javascript"></script>
      <script src="js/quiz.js" type="text/javascript"></script>
</head>
<body>

<section id="Coding">
<h1><span>[Quiz]</span> Coding<span>[Hard]</span></h1>

<content id="Coding" class="0">
<h2>Is this working?</h2>
<button type="submit" class="correct">Yes</button>
<button type="submit">No</button>
</content>

</section>



<section id="Facebook">
<h1><span>[Quiz]</span> Facebook<span>[Normal]</span></h1>

<content id="Facebook" class="0">
<h2>Is this working?</h2>
<button type="submit" class="correct">Yes</button>
<button type="submit">No</button>
</content>

</section>


<section id="Games">
<h1><span>[Quiz]</span> Games<span>[Easy]</span></h1>

<content id="Games" class="0">
<h2>Is this working?</h2>
<button type="submit" class="correct">Yes</button>
<button type="submit">No</button>
</content>

</section>

<section id="Child">
<h1><span>[Quiz]</span>Common sense<span>[Dumb Easy]</span></h1>

<content id="Child" class="0">
<h2>Is this working?</h2>
<button type="submit" class="correct">Yes</button>
<button type="submit">No</button>
</content>

</section>


</body>
</html>

CSS

body {
    font-family:sans-serif;
    margin:0;
    background-color:#333;
}
content {
    position:fixed;
    left:25%;top:20%;
    display:none;
    border:1px solid black;
    width:50%;
}

content h2 {
    margin:0%;
    margin-bottom:5%;
    padding:1%;
    color:white;
    background-color:black;
}

content button {
    text-align:center;
    padding:1%;
    width:200px;
    margin-bottom:3%;
    margin-left:20%;
    font-size:18px;
}

content button:nth-child(6), content button:nth-child(3) {
    margin-left:5%;
}

content p {
    text-align:center;
    margin:0;
    font-size:20px;
    color:red;
    background-color:black;
    padding:1%;
}

content .score {
    background-color:black;
    color:white;
    text-align:center;
    font-size:18px;
}

content:last-of-type h2 {
    margin:0;
    text-align:center;
    font-size:30px;
}

section {
    margin:0;
    border-bottom:1px solid black;
}

section h1 {
    padding:3%;
    color:white;
    margin:0;
    cursor:pointer;
}

section:nth-child(1) h1 {
    background-color:#FF4136;
}

section:nth-child(2) h1 {
    background-color:#FF851B;
}

section:nth-child(3) h1 {
    background-color:#2ECC40;
}

section:nth-child(4) h1 {
    background-color:#39CCCC;
}

section h1 {
    text-align:center;
}

section h1 span:nth-child(1) {
    float:left;
}

section h1 span:nth-child(2) {
    float:right;
}

的jQuery

var score = [0, 10];
var life = 3;
var delay = 500;
var game;

$(function quiz() {
    console.log(game) /* Problem Maker */
});

$(function() {
    $('section').on('click', function() {
        game = $(this).attr('id');

            /* CHECK ACTIVE GAME */
        if($(this).hasClass('active')) {

         if(confirm('Exit game')) {
            /* EXIT GAME */
            $(this).removeClass('active')
            $('section').slideDown(delay);
         }

        } else {
        if(confirm('Do you want to start the ' + game + ' quiz?')) {
            /* START GAME */
        $(this).siblings().slideUp(delay);
        $(this).addClass('active');
            quiz();
        } else {

            /* CANCEL GAME */ 
            console.log('false')
        }
        return;
    }
    });
});

Answer 1

我认为你可能会混淆jQuery和JavaScript之间的界限。

quiz函数似乎只是将游戏值报告给控制台，而不需要通过jQuery定义。

只需定义quiz就可以了：

function quiz() {
    console.log(game)
}

当你将它包装在那个jQuery块中时，它的范围不再是全局的，这就是你得到引用错误的原因。

以下是阅读JavaScript和范围界定的好文章：http://www.w3schools.com/js/js_scope.asp

从功能调用功能

1 个答案: