javascript - javascript 和 jquery 实验室
问题描述
我正在尝试将 jQuery 与我创建的 JavaScript 代码(交互式字典)一起使用。我不确定什么是最好的方法,请建议。
JS文件:
'use strict';
let myDictionary = {
"Determinant": "Noun [C] FORMAL - Something that controls or affects what happens in a particular situation: Soil and climate are the main determinants of how land is used.",
"Enthusiasm": "Noun - A feeling of energetic interest in a particular subject or activity and an eagerness to be involved in it: I just can't work up (= start to feel) any enthusiasm for the whole project.. ",
"Passionate": "Having very strong feelings or emotions: a passionate speech The child's mother made a passionate plea for help. Joe is passionate about baseball (= he likes it very much)..",
"Consistency": "Noun - (BEING THE SAME) the quality of always behaving or performing in a similar way, or of always happening in a similar way: They've won a few games this season but they lack consistency. It's important to show some consistency in your work. Opposite inconsistency (inconsistent).",
"Powelessness": "Noun - The condition or feeling of having no power: A significant cause of stress in the workplace is a sense of powerlessness and lack of control. As hostages, they experienced humiliation and utter powerlessness.."
};
let buttonListElement = document.getElementById("buttons");
let definitionElement = document.getElementById("definition");
function createOnClickListener(definition) {
return function() {
definitionElement.innerHTML = definition;
}
}
for (let word in myDictionary) {
let buttonElement = document.createElement("button");
buttonElement.innerHTML = word;
buttonElement.addEventListener("click", createOnClickListener(myDictionary[word]));
let listItemElement = document.createElement("li");
listItemElement.appendChild(buttonElement);
buttonListElement.appendChild(listItemElement);
}
解决方案
我正在学习 jQuery,所以我一直在逐步完成我发布的代码,我正在尝试更改所有内容。我已经将 js 转换为 jQuery,我想知道是否可以添加任何其他更改编码。
enter code here
$(document).ready(function() {
let myDictionary = {
"Determinant": "Noun [C] FORMAL - Something that controls or affects what happens in a particular situation: Soil and climate are the main determinants of how land is used.",
"Enthusiasm": "Noun - A feeling of energetic interest in a particular subject or activity and an eagerness to be involved in it: I just can't work up (= start to feel) any enthusiasm for the whole project.. ",
"Infinity": "Time or space that has no end. A number that is larger than all other numbers.",
"Love": "To like another adult very much and be romantically and sexually attracted to them, or to have strong feelings of liking a friend or person in your family.",
"Noun": "A word that refers to a person, place, thing, event, substance, or quality."
};
let buttonListElement = $('#buttons');
let definitionElement = $('#definition');
function createOnClickListener(definition) {
return function() {
$(definitionElement).html(definition);
}
};
for (let word in myDictionary) {
let buttonElement = document.createElement("button");
$(buttonElement).html(word);
buttonElement.addEventListener("click", createOnClickListener(myDictionary[word]));
let listItemElement = document.createElement("li");
listItemElement.append(buttonElement);
buttonListElement.append(listItemElement);
}
});
推荐阅读
- visual-studio-code - 如何在测试之间重置 vscode UI?
- c++ - 如何从容器中迭代前十个项目
- javascript - 离开页面前的 JavaScript 动作,没有 beforeonload
- python - 在 AWS lambda 函数上使用 pyspark 二进制文件,在向驱动程序发送其端口号之前退出错误 Java 网关进程
- python - 如何使用 Python 以编程方式启动和停止 Appium Server
- c# - 在 asp.net core 2.0 webapi 中实现 CQRS 模式的示例
- vb.net - 使用 lotus notes 发送电子邮件 - 参数计数不匹配
- maven - 无法读取 org.apac he.maven.plugins 的工件描述符
- css - @media 适用于 Chrome 和 Safari,但不适用于 Firefox 和 IE
- reflection - F# - 如何根据返回类型动态创建异步函数