1

JavaScript と JQuery を独学で学びながら、簡単な用語集アプリを使って作業しています。現在、用語集の用語は 2 つの json ファイル (用語用と頭字語用) にあります。用語集または頭字語集で利用可能な単語をクリックすると、アラートに定義が表示されるようにするテキストとコードを含むページがあります。その部分は機能しています。私がやりたいことは、一致する定義 (色、下線など) を持つテキスト内の各単語のスタイルを変更できるようにすることです。ループを使用して、単語が用語集に含まれているかどうかを確認してから適用する必要があると思いますが (既に実行できます)、動的に実行するときにスパンが機能するかどうかはよくわかりません。私のコードの 1 つのスパン タグは、ここの別の質問に投稿された変更された例であり、私のために働いています。それがどのように機能するかはあまりわかりません。誰でも私を正しい方向に導く時間がありますか?

//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

たぶん、次のようなことがうまくいくでしょう：

コードを少し変更しましたが、テストされていないことに注意してください。

という名前の 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 に答える