Question

我想允许用户从单词库中选择给定的单词并将其放入文本框中。一旦用户提交输入，我将创建一个脚本来验证单词的正确顺序。

我现在关注的是如何从单词库中选择单词并将它们作为文本（每个单词之间有空格）放入文本框中。

如何做到这一点？当用户点击该单词时，只会放置中文单词，而不是英文。

编辑：这些字词不一定需要在文本框中。我只是希望用户能够从单词库中选择单词，点击提交，然后允许解析该顺序中的单词。我想通过文本框提交一串单词的方式。

enter image description here

HTML：

Create sentence:

<input type="text" id="test"  value="" />
<br/>
<button onclick="submitMe()" id="testButton" >Submit Response </button>
<br/>

<div class="wordBank_Headings">Word Bank:
    <span class="wordBank_Words"></span>
</div>

JavaScript的：

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><b>" + key + "</b>: " + words[obj][key] + "</li>");
        }
    }
}

function submitMe() {
//will eventually verify input from textbox
    var value = document.getElementById('test').value;
    alert(value);
}

Answer 1

向li添加属性。然后你可以在点击事件中取消它

function bank() {
        $(".wordBank_Words").empty();
        for (obj in words) {
            for (key in words[obj]) {
                $(".wordBank_Words").append("<li class='bank-word' data-display-word='" + key + "' ><b>" + key + "</b>: " + words[obj][key] + "</li>");
            }
        }
    }

    bank();

    $(".bank-word").click(function (event) {

        $('#test').val($('#test').val() + " " + $(this).attr('data-display-word'));
        $(this).hide();
    });

Answer 2

您需要一种方法将每个<li>元素与其中文单词相关联例如，您可以：

从<li>元素的html中提取它（不推荐）。
对每个data-chinese元素使用<li>等自定义属性。只需在创建元素时定义它，然后使用$.attr()。
使用$.data()存储每个<li>元素的中文字。与2中一样，在创建元素时存储此数据。

3号看起来像是：

function bank() {
    $(".wordBank_Words").empty();
    for (obj in words) {
        for (key in words[obj]) {
            $("<li><b>" + key + "</b>: " + words[obj][key] + "</li>")
                // append the new <li> element:
                .appendTo(".wordBank_Words")
                // store the chinese word in the element's data:
                .data('chinese', words[obj][key])
                // define the click event on the element:
                .on('click', function () {
                    var chinese = $(this).data('chinese');
                    var txt = $("#test").val() + " " + chinese;
                    // (you can conditionally add the space only if txt is not empty)
                    // update the text box:
                    $("#test").val(txt);
                });
        }
    }
}

查看工作示例here（单击列表中的单词）。

将所选文本元素放入文本框中，或者在没有文本框的情况下提交所选单词

2 个答案: