Question

我正在自学JavaScript和JQuery，并在我去的时候使用一个简单的词汇表应用程序。目前我的词汇表术语有两个json文件（一个用于术语，一个用于缩写词）。我有一个带有文本的页面和代码，当我点击术语表或词汇表词汇表中提供的单词时，可以在警报中显示定义。那部分是有效的。我想要做的是能够改变文本中具有匹配定义（颜色，下划线等）的每个单词的样式。我想我需要使用一个循环来检查词汇表中是否有单词（我已经可以这样做了）然后应用但是我不确定动态执行时跨度是否有效。我的代码中的一个span标签是修改过的示例，已经在这里发布了另一个问题，我让它为我工作，我只是不太确定它是如何做的。任何人都有时间让我朝着正确的方向前进吗？

//breaks the paragraph html into word by word targets
var p = $('p#paragraph');
var words;
p.html(function(index, oldHtml) {
    words = oldHtml.replace(/\b(\w+?)\b/g, '<span class="word">$1</span>')
    return words;
});
//when word is clicked checks to see if word in the glossary, if so displays alert box with word and definition
p.click(function(event) {
    if (this.id != event.target.id) {
          var termNeeded = event.target.innerHTML;
        //checks Terms json first
        var checkAcronyms = true;
        for (var i = 0; i < jsonTerms.GlossaryTerms.length; i++) {
            var obj = jsonTerms.GlossaryTerms[i];
            if (obj.term == termNeeded) {
                alert(obj.term + ":  " + obj.definition);
                checkAcronyms = false;
                break;

         };
        };
        //if the word is not in the terms, then checks in the acronyms
            if (checkAcronyms == true){
            for (var i = 0; i < jsonAcronyms.GlossaryAcronyms.length; i++) {
            var obj = jsonAcronyms.GlossaryAcronyms[i];
            if (obj.term == termNeeded) {
                alert(obj.term + ":  " + obj.definition);
            break;
            };
            };
            };
        };

});

//brings in the JSON data
var jsonTerms;
$.getJSON("GlossaryTerms.json", function(data) {
    jsonTerms = data;
    //console.log(jsonTerms);
});

var jsonAcronyms;
$.getJSON("GlossaryAcronyms.json", function(data) {
    jsonAcronyms = data;
    //console.log(jsonAcronyms);
});

Answer 1

在您的跨度中添加并且加载了JSON数据后，您需要遍历每个数据单词跨度测试他们的匹配。

p.find('span.word').each(function(){
    // "this" now refers to the span element
   var txt=this.innerHTML;
   if(isInGlossary(txt)){
    $(this).addClass('in_glossary');
   }
})

您需要定义isInGlossary(term)功能，几乎就是您在p.click代码中已经完成的功能。

Answer 2

也许这样的事情可以解决问题：

我改变了你的代码，请注意它没有经过测试。

您必须定义名称为"defined"的CSS样式，这将指示该单词具有定义。

我将您的逻辑提取到一个单独的函数中以供重用。另外，创建了addStyleToWords函数，它应该迭代你的所有单词，检查它们是否有定义，如果有，那么为该元素添加一个额外的类。

var jsonTerms;
var jsonAcronyms;

function checkWord(termNeeded) {
    //checks Terms json first
    for (var i = 0; i < jsonTerms.GlossaryTerms.length; i++) {
        var obj = jsonTerms.GlossaryTerms[i];
        if (obj.term == termNeeded) {
            return obj;
        }
    }
    //if the word is not in the terms, then checks in the acronyms
    for (var i = 0; i < jsonAcronyms.GlossaryAcronyms.length; i++) {
        var obj = jsonAcronyms.GlossaryAcronyms[i];
        if (obj.term == termNeeded) {
            return obj;
        }
    }
    return null;
}
function addStyleToWords() {
    $(".word").each(function() {
        var el = $(this);
        var obj = checkWord(el.text());
        if (obj != null) el.addClass("defined");
    });
}

//breaks the paragraph html into word by word targets
var p = $('p#paragraph');
p.html(function(index, oldHtml) {
    return oldHtml.replace(/\b(\w+?)\b/g, '<span class="word">$1</span>');
});
//when word is clicked checks to see if word in the glossary, if so displays alert box with word and definition
p.click(function(event) {
    if (this.id != event.target.id) {
        var obj = checkWord(event.target.innerHTML);
        if (obj != null) alert(obj.term + ":  " + obj.definition);
});

//brings in the JSON data
$.getJSON("GlossaryTerms.json", function(data) {
    jsonTerms = data;
    $.getJSON("GlossaryAcronyms.json", function(data) {
        jsonAcronyms = data;
        addStyleToWords();
    });
});

Answer 3

我不明白......

如果我理解正确，请查看：JQuery addClass

我的建议：

如果你想迭代段落中的每个工作，那么，在你的点击处理程序中使用$（'p＃paragraph）.find（'span'）找到每个span标签。each（function（）{... }）;

在你的每个函数中，使用$（this）.html（）进行工作要设置单词样式，请在$（this）中添加一个类或css。见：JQuery addClass

而是将JSONArray作为JSONObject（非常类似于关联数组）返回，其中单词为属性，描述为值，这样您可以像这样搜索它：var definition = json [word]。

如果词汇表中有定义，请使用SPAN更改单词的颜色

3 个答案: