Question

在这段代码中，用户应该选择与定义匹配的单词（定义和匹配单词存储在数组中）。现在，我已经具备了检查所选单词是否与数组的第一个元素匹配的功能。如果选择了正确的单词，则会显示成功消息。此时，系统会要求用户单击与数组中第一个定义匹配的单词。一旦第一个被正确回答，我希望有一个选项可以移动到下一个。我稍后会添加更多单词和定义。

以下是我所拥有的：

var onA = [
    {t: "grooming", d: "an activity when someone builds an emotional connection with a child to gain their trust for the purposes of sexual abuse or exploitation."},
    {t: "cyberbullying", d: "an activity that involves the use of ICT, particularly mobile phones and the internet, deliberately to upset, threaten and intimidate someone else."}
];

function get_selection() {
    var txt = '';
    var feedback = document.querySelector("#onA .feedback");
    if (window.getSelection) {
        txt = window.getSelection().toString();
    } else if (document.selection) {
        txt = document.selection.createRange().text;
    }

    document.querySelector("#onA .word").innerHTML = txt;

    function feed(oldClass, newClass, message) {
        feedback.classList.remove(oldClass);
        feedback.classList.add(newClass);
        feedback.innerHTML = message.bold();
    }

    if (txt === onA[0].t) {
        feed("alert-warning", "alert-success", "Well done!");
    } else {
        feed("alert-success", "alert-warning", "Try again!");
    }    
}

document.getElementById("onA").onclick = get_selection;
document.querySelector("#onA .def").innerHTML += onA[0].d;

编辑：我遇到的第一个问题是当我想让get_selection（）函数接受一个参数时（例如，在函数中if条件语句中使用的数组的索引，它会停止工作：

function get_selection(i) {
    var txt = '';
    var feedback = document.querySelector("#onA .feedback");
    if (window.getSelection) {
    txt = window.getSelection().toString();
    } else if (document.selection) {
    txt = document.selection.createRange().text;
    }

    document.querySelector("#onA .word").innerHTML = txt;
    function feed(oldClass, newClass, message) {
    feedback.classList.remove(oldClass);
    feedback.classList.add(newClass);
    feedback.innerHTML = message.bold();
    }

    if (txt === onA[i].t) {
    feed("alert-warning", "alert-success", "Well done!");
    } else {
    feed("alert-success", "alert-warning", "Try again!");
    }    
}





document.getElementById("onA").onclick = get_selection(0);


document.querySelector("#onA .def").innerHTML += onA[0].d;

它没有在控制台中显示任何错误，只是反馈是否选择了正确/错误的单词不再起作用。谢谢。

Answer 1

您实际需要做的是让get_selection()函数返回一个函数。否则，以下行：

document.getElementById("onA").onclick = get_selection(0);

只运行该函数，该函数返回undefined并有效清除onclick元素的onA处理程序。

将get_selection功能更改为以下结构：

function create_get_selection_handler(index) {
    return function click_handler() {
        // (rest of code goes here and uses "index" variable)
    };
}

然后将onclick行更改为：

document.getElementById("onA").onclick = create_get_selection_handler(0);

如果您想了解其工作原因的技术原因，请查看闭包在Javascript中的工作方式以及它们为什么很棒（实际上，内部函数可以访问index变量外部功能）。 Javascript Garden是一个很好的起点，页面的其余部分也值得回顾。

JavaScript - 迭代一系列问题（数组/对象）

1 个答案: