我想允许用户从单词库中选择给定的单词并将其放入文本框中,然后从单词库中删除它们(hidden
)。如果用户犯了错误并想要回复该单词,他们可以将其从文本框中删除,然后将其放回单词库中。
如何做到这一点? (请原谅可怕的ms画像)
HTML:
Create sentence:
<input type="text" id="textBox" value="" />
<br/>
<button onclick="submitMe()" id="testButton" >Submit Response </button>
<br/>
<div class="wordBank_Headings">Word Bank:
<span class="wordBank_Words"></span>
</div>
JavaScript的:
您会在此处看到/*THIS IS THE PORTION I AM HAVING TROUBLE WITH*/
部分。我试图从文本框中获取所有单词...如果单词被隐藏且文本框中不存在...将其添加回Word Bank。
$(document).ready(function() {
playerResponse();
$(".bank-word").click(function (event) {
//append each newly selected word to $('#textBox').val()
$('#textBox').val($('#textBox').val() + " " + $(this).attr('word'));
//hide word from word bank
$(this).hide();
/*THIS IS THE PORTION I AM HAVING TROUBLE WITH*/
//Get all words from text box
//if word is hidden and does not exist in text box... add it back
$.each($('#textBox').val().split(/\s+/), function(index, word) {
console.log( index + ": " + word);
$('li.bank-word').find(':hidden').each(function(index) {
log("index : " + index + ", " + $(this).text());
$(this).show(); //reveal word in word bank again after we find that it is hidden AND has been deleted from text box
});
});
});
});
var words = {
"task1" :
{
'Ni' : 'you',
'Wo' : 'I',
'Hao' : 'good',
'Shi' : 'am'
}
}
function bank() {
$(".wordBank_Words").empty();
for (obj in words) {
for (key in words[obj]) {
$(".wordBank_Words").append("<li class='bank-word' word='" + key + "' ><b>" + key + "</b>: " + words[obj][key] + "</li>");
}
}
}
function submitMe() {
//will eventually verify input from textbox
var value = document.getElementById('test').value;
alert(value);
}
编辑:
var array = [];
var i = 0;
$.each($('#textBox').val().split(/\s+/), function(index, word) {
array.push(word);
log("ARRAY: " + array[i] + array.length);
i++;
console.log( index + ": " + word);
for (obj in words) {
for (key in words[obj]) {
//if word doesn't exist in text box, and doesn't exist in word bank, add it
if (!isInArray(key, array) && is in wordbank...) {
key.show(); //pseudo code
}
}
}
});
function isInArray(value, array) {
return array.indexOf(value) > -1;
}