JS函数参数自己重设

我正在尝试创建一个简单的问题答案“闪存卡”程序。用户用相反的语言键入单词的含义。一切工作正常，除了一件事：JS函数参数自己重设

当你点击按钮进入下一级，它工作正常。但是，当您输入正确的答案时，它会返回到第1级。为什么这是？下一个（）函数级别参数重置自己回到1？请帮忙！

HTML：

</head> 

    <body> 
    <h1>Spanish</h1> 
    <div id="main"> 
     <h1 id="topic_name">Subject Pronouns</h1> 
     <p>Type the word/phrase below in the opposite language</p> 
     <p>If there is an accent or ~ above a letter, put^before that letter. Example: diecis^eis</p> 
     <hr id="margin-bottom"> 
     <h1 id="question"></h1> 
     <input id="answer_box"/> 
     <button id="next"></button> 
     <button id="answer">Show Answer</button> 
    </div> 

    </body> 
</html>

JS：

$(document).ready(function(){ 

    var lvl1= 
    [ 
     [["I"],["yo"]], 
     [["you (formal)"],["usted"]], 
     [["you (informal)"],["t^u"]], 
     [["he"],["^el"]], 
     [["she"],["ella"]], 
     [["we (masculine)"],["nosotros"]], 
     [["we (feminine)"],["nosotras"]], 
     [["you all (formal)"],["ustedes"]], 
     [["you all (informal)"],["vosotros"]], 
     [["they (masculine or mixed)"],["ellos"]], 
     [["they (feminine)"],["ellas"]], 
     ]; 

    var lvl2= 
    [ 
    [["yo"],["I"]], 
    [["usted"],["you (formal)"]], 
    [["t^u"],["you (informal)"]], 
    [["^el"],["he"]], 
    [["ella"],["she"]], 
    [["nosotros"],["we (masculine)"]], 
    [["nosotras"],["we (feminine)"]], 
    [["ustedes"],["you all (formal)"]], 
    [["vosotros"],["you all (informal)"]], 
    [["ellos"],["they (masculine)"]], 
    [["allas"],["they (feminine)"]], 
    ]; 

    var lvl3= 
    [ 
    [["yo soy"],["I am"]], 
    [["tú eres"],["you (informal) are"]], 
    [["él es"],["he is"]], 
    [["ella es"],["she is"]], 
    [["usted es"],["you (formal) are"]], 
    [["nosotros somos"],["we are"]], 
    [["vosotros sois"],["you all (informal) are"]], 
    [["ellos/ellas son"],["they are"]], 
    [["ustedes son"],["you all (formal) are"]], 
    ]; 

    var lvl4= 
    [ 
    [["I am"],["yo soy"]], 
    [["you (informal) are"],["t^u eres"]], 
    [["he is"],["^el es"]], 
    [["she is"],["ella es"]], 
    [["you (formal) are"],["usted es"]], 
    [["we are"],["nosotros somos"]], 
    [["you all (informal) are"],["vosotros sois"]], 
    [["you all (formal) are"],["ustedes son"]], 
    ]; 

    next(1); 

    function next(level){ 
    random=(Math.floor(Math.random()*10)); 

    switch(level){ 
     case 1: 
     question=lvl1[random][0]; 
     answer=lvl1[random][1]; 
     $('#next').text("Level 2"); 
     break; 
     case 2: 
     question=lvl2[random][0]; 
     answer=lvl2[random][1]; 
     $('#next').text("Level 3"); 
     break; 
     case 3: 
     random=(Math.floor(Math.random()*9)); 
     question=lvl3[random][0]; 
     answer=lvl3[random][1]; 
     $('#next').text("Level 4"); 
     break; 
     case 4: 
     var random=(Math.floor(Math.random()*8)); 
     question=lvl4[random][0]; 
     answer=lvl4[random][1]; 
     $('#next').text("Done"); 
     break; 
     default: 
     alert("switch error"); 
    } 


    $('#question').text(question); 



    $('#answer_box').keyup(function(){ 
     if($(this).val()==answer){ 
     $('#answer_box').attr("placeholder",""); 
     $('#answer_box').val(""); 
     next(level); 
     } 
    }); 



    $('#next').click(function(){ 
     next(level+1); 
    }); 



    $('#answer').click(function(){ 
     $('#answer_box').attr("placeholder",answer); 
    }); 


    }//function next 

});//end

CSS：

#main{ 
    border:3px solid blue; 
    height:500px; 
    width:600px; 
    top:50%; 
    left:50%; 
    position:fixed; 
    margin-top:-230px; 
    margin-left:-300px; 
    border-radius:5%; 
} 

h1{ 
    text-align:center; 
} 


p{ 
    text-align:center; 
} 

#margin-bottom{ 
    margin-bottom:80px; 
} 

#next{ 
    display:block; 
    margin:0 auto; 
} 

#answer_box{ 
    display:block; 
    margin:0 auto; 
    margin-bottom:20px; 
} 

#answer{ 
    display:block; 
    margin:0 auto; 
}

来源

2016-09-22 Blake Allen

我没有在任何地方看到“水平”？ –

level是next（）函数的参数，我最初传入的是1。我可以不使用它作为函数中的变量吗？ –

该问题未能声明变量并且意外创建闭包。

question=和answer=正在创建相同名称的窗口属性，因为它们尚未声明。

level是功能next正式参数，首先由next(1)

的点击函数声明为嵌套职能范围内next和访问存储在级别参数的值的语句设置为1（创建关闭时next()返回）。每次调用next时，它们也会重新应用到按钮元素。

建议的解决方案：在“准备就绪”IIFE内声明questionanswer和level变量。在调用next之外声明并应用一次按钮事件处理程序。使用显式代码维护level。

更新与细节：

删除

next(1);

而且随着变量定义和未来（）的调用不带参数的替换。级别在下一个功能之外被维护。

var question = ""; 
var answer = ""; 
var level = 1; 
next();

从function next(level)...卸下等级参数，并用

function next(){ 
random=(Math.floor(Math.random()*10)); 

switch(level){ 
    case 1: 
    question=lvl1[random][0]; 
    answer=lvl1[random][1]; 
    $('#next').text("Level 2"); 
    break; 
    case 2: 
    question=lvl2[random][0]; 
    answer=lvl2[random][1]; 
    $('#next').text("Level 3"); 
    break; 
    case 3: 
    random=(Math.floor(Math.random()*9)); 
    question=lvl3[random][0]; 
    answer=lvl3[random][1]; 
    $('#next').text("Level 4"); 
    break; 
    case 4: 
    var random=(Math.floor(Math.random()*8)); 
    question=lvl4[random][0]; 
    answer=lvl4[random][1]; 
    $('#next').text("Done"); 
    break; 
    default: 
    alert("switch error"); 
} 

$('#question').text(question); 


}// end of function next body

这在很大程度上是因为代码发布相同的替换，但移动KEYUP和下一步按钮搬运者遵循function next主体;不要在它里面定义它们：

$('#next').click(function(){ 
    level = level + 1; // increase level 
    next(); 
}); 

$('#answer_box').keyup(function(){ 
    if($(this).val()==answer){ 
    $('#answer_box').attr("placeholder",""); 
    $('#answer_box').val(""); 
    next(); // stay on current level 
    } 
});

我还没有把代码来处理发生了什么，当你点击时，“完成”正显示出下一步按钮。您询问的关闭是通过注册在next函数中创建的键控和单击处理程序匿名函数创建的：匿名函数在next内查找变量和参数定义，对应于创建匿名函数时的值。如果您不熟悉这个概念，请在javascript中搜索关闭。

来源

2016-09-22 01:50:26 traktor53

谢谢，但我有一些问题：1）如果我把按钮点击函数放在next（）函数之外，那么#next click函数如何知道下一级应该进入哪个级别传递给next（））？或者#answer click功能如何知道显示的是什么答案？他们需要的这些变量不在他们的范围之内。这是你明确的代码是什么意思？ 2）当你说next（）返回“创建闭包”时，你是什么意思？ –

请参阅[本社区wiki]（http://stackoverflow.com/a/111111/1848578）了解关闭的信息。 – qxz

哇，非常感谢您的详细解答！在'next'函数之外定义这些变量的概念，然后在内部对它们做**的东西将帮助我在未来的许多项目中。我开始更全面地理解继承和面向对象编程。 –

每次调用一个函数会为＃下一个注册事件，＃answer_box和“＃的答案，你确定这是你想要的吗？只是因为这将是一个问题，你的问题是不是所有

来源

2016-09-22 02:10:08

JS函数参数自己重设

回答

相关问题