jquery将输入值存储到空数组元素中 [英] jquery store input value into empty array element

问题描述

我有这个数组

  var foods = new Array（）; 
 foods = [
 {id：1，正确：'icecream'，显示：'icecream'，回应：''}，
 {id：2，正确：'sundae'，显示：'圣代'，回应：''}，
 
]; 
  

和这个html div

 < div id =showfoodsclass =foodlist> 
< div< input id =inputFoodChoiceclass =foodinput/>< / div> 
< / div> 
  

下面是项目表单部分的一个jquery部分

 函数FoodDisplay（）
 {
 var txtTrial =; 
 
 $（＃showfoods）。hide（）; 
 
 txtTrial = trials [curTrial] .display; 
 
 $（＃textPrompt）。html（txtTrial）; 
 
 $（＃showfoods）。show（）; 
 
 $（＃inputFoodChoice）。val（''）; 
 $（＃inputFoodChoice）。focus（）; 
 
 
 $ b  

icecream在它下面的一个表格框以及用户将要做的是输入确切的单词icecream，然后按回车键（ltr == 13）

我想要的是存储将人类的类型赋值到食物数组的空白响应部分，然后将其与食物数组中的正确值进行比较。取决于这个人是否正确，会弹出一条消息，说你得到了它！或不正确！

在该消息出现很长时间后，它会以相同的方式显示单词圣代。

我无法存储输入值/将其与正确值进行比较。
有人可以帮忙吗？

我想从某种意义上说，我希望它能够编辑食物数组中的响应值，所以我可以把这个值将其与输入值进行比较，还是甚至有必要？

解决方案

它有助于存储用户的响应，以防您希望输出他们如何做以及为他们输入的内容

您需要一个函数来检查输入值与您的列表：

  var checkInputValue = function（）{
 trials [curTrial] .response = input.val（）; //将用户的输入存储到响应中
 if（trials [curTrial] .response === trials [curTrial] .correct）{//用户输入等于正确的文本
 alert（'Correct！' ）; 
} else {
 alert（'Incorrect！'）; 
} 
 curTrial ++; //下一个试验
 showTrial（）; 
}; 
  

我建议您隔离显示问题的逻辑，因此您可以为每个函数调用相同的函数qustion，我把你的代码移到这里：

  var curTrial = 0; 
 var input = $（＃inputFoodChoice）; 
 var container = $（＃showfoods）; 
 var prompt = $（＃textPrompt）; 
 var showTrial = function（）{
 container.hide（）; 
 if（curTrial< trials.length）{
 txtTrial = trials [curTrial] .display; 
} else {
 alert（没有更多问题了。）; 
} 
 prompt.html（txtTrial）; 
 container.show（）; 
 input.val（''）; 
 input.focus（）; 
}; 
  

参见小提琴： http://jsfiddle.net/amyamy86/jSyfy/

我的例子使用一个按钮点击来触发 checkInputValue（），您可以根据需要更改它并附加 keydown / keypressed 输入键的事件。

I have this array

 var foods = new Array();
    foods = [
        { id:  1, correct:'icecream', display: 'icecream',  response: ''},
        { id:  2, correct:'sundae', display: 'sundae',  response: ''},

    ];

and this html div

<div id="showfoods" class="foodlist">
    <div <input id="inputFoodChoice"class="foodinput" /></div>
        </div>

Here's a jquery portion of what will happen with the form portion of the project

function FoodDisplay()
    {
    var txtTrial = "";

    $("#showfoods").hide();

    txtTrial = trials[curTrial].display;

    $("#textPrompt").html(txtTrial);

    $("#showfoods").show();

    $("#inputFoodChoice").val('');
    $("#inputFoodChoice").focus();


}

The word "icecream" will appear with a form box below it and what the user will do is enter the exact word, icecream, then press enter (ltr==13)

What I want is to store the value the person types into the empty "response" portion of the foods array, then to compare this with the value of "correct" in the foods array. depending on whether or not the person gets it right, a message will pop up saying you got it! or incorrect!

after that message appears for however long, it will show the word "sundae" in the same manner.

I'm having trouble storing the input value/comparing it with the correct value. Could someone please help?

I guess in a sense I want it to "edit" the response value in foods array, so I can take that value and compare it to the input value, or is that even necessary?

解决方案

It helps to store the user's response in case you want to output a summary of how they did and what they typed for each one.

You need a function to check the input value with your list:

var checkInputValue = function () {
    trials[curTrial].response = input.val();    // store user's input into response
    if (trials[curTrial].response === trials[curTrial].correct) {    // users input is equal to the correct text
        alert('Correct!');
    } else {
        alert('Incorrect!');
    }
    curTrial++;    // next trial
    showTrial();
};

And I recommend you isolating the logic for showing a question, so you can call the same function for each qustion, I moved your code into here:

var curTrial = 0;
var input = $("#inputFoodChoice");
var container = $("#showfoods");
var prompt = $("#textPrompt");
var showTrial = function() {
    container.hide();
    if (curTrial < trials.length) {
        txtTrial = trials[curTrial].display;
    } else {
        alert("No more questions left.");
    }
    prompt.html(txtTrial);
    container.show();
    input.val('');
    input.focus();        
}; 

See fiddle: http://jsfiddle.net/amyamy86/jSyfy/

My example uses a button click to trigger the checkInputValue(), you can change it for your needs and attach the keydown/keypressed event for the enter key.

这篇关于jquery将输入值存储到空数组元素中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！