首页 > 解决方案 > 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);
 }

标签: javascriptjquery

解决方案


我正在学习 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);
  }

});

推荐阅读