取消隐藏已从文本框中删除的隐藏字词

时间:2014-01-07 06:16:47

标签: javascript jquery html

我想允许用户从单词库中选择给定的单词并将其放入文本框中,然后从单词库中删除它们(hidden)。如果用户犯了错误并想要回复该单词,他们可以将其从文本框中删除,然后将其放回单词库中。

如何做到这一点? (请原谅可怕的ms画像)

enter image description here

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

0 个答案:

没有答案