Question

我正在尝试创建一个简单的问答“闪存卡”程序。用户键入相反语言中单词的含义。一切都很好，除了一件事：

当您单击按钮进入下一级别时，它可以正常工作。但是，当您输入正确的答案时，它会回到1级。为什么会这样？ next（）函数 level 参数是否将自身重置为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;
}

Answer 1

问题是无法声明变量并意外创建闭包。

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

level是函数next的形式参数，首先通过语句1

设置为next(1)

click函数在next中声明为嵌套函数，并访问存储在level参数中的值（在next()返回时创建一个闭包）。每次调用next时，它们也会重新应用于按钮元素。

建议的解决方案：在＆＃34;准备好＆＃34;内声明question answer和level个变量IIFE。在调用next之外，声明并应用按钮事件处理程序一次。使用显式代码维护level。

<小时/> 更新详情：

删除

 next(1);

用变量定义替换，并用没有参数调用next（）。在下一个功能之外维持等级。

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
  }
});

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

Answer 2

每次调用下一个函数都会为＃next注册事件，＃answer_box和＆＃39; #shick，你确定这是你想要的吗？只是因为这将是一个问题，你的问题不是全部

JS函数参数自身重置

2 个答案: