1

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

//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);
});
4

3 回答 3

2

一旦您添加了跨度并加载了 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

于 2013-03-12T04:31:18.603 回答
2

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

我稍微更改了您的代码，请注意它未经测试。

您必须使用 name 定义 CSS 样式"defined"，这将表明该词具有定义。

我将您的逻辑提取到一个单独的函数中以供重用。此外，创建了该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();
    });
});
于 2013-03-12T04:35:15.393 回答
1

我不明白...

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

我的建议：

如果您想遍历段落中的每个作品，那么在您的点击处理程序中使用 $('p#paragraph).find('span').each(function(){...});

在你的每个函数中，使用 $(this).html() 来设置你的单词的样式，添加一个类或 css 到 $(this)。参见：JQuery addClass

而是将您的 JSONArray 作为 JSONObject（很像关联数组）返回，其中 word 是属性，而 description 是值，这样您就可以像这样搜索它：var definition = json[word].

于 2013-03-12T04:31:05.457 回答