0

私はこのjQueryスニペットを持っており、それらを強調するために変数を保存しました。

    var words= ['Sample','count'];
    var keywords = ['import','public','class','static','void','for','if','else'];
    $(document).ready(function() {
    if (#showVariables).click(function(){
        var wordsHtml = $('#identifier').html();
        $.each(words, function(idx, word) {
        var reg = new RegExp(word, 'g');
        wordsHtml = wordsHtml.replace(reg, '<span class="highlight">' + word + '</span>');
        })
        $('#identifier').html(wordsHtml);
    });


});

これは役立つかもしれないhtmlです、

<div id="menuDiv"><span id="showVariables" class="button">Variables</span><span id="showKeywords" class="button">Keywords</span></div>
<div id="codeDiv">
<br><span class="keyword">import</span> java.io.*;
<br>
<br><span class="keyword">public</span> <span class="keyword">class</span> <span class="identifier">Sample</span> {

<br>&nbsp;&nbsp;<span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> main(String args[]) {
<br>&nbsp;&nbsp;&nbsp;&nbsp;</span>int</span> <span class="identifier">count</span> = 0;

キーワードと識別子を強調しようとしています。どこが間違っているのでしょうか？

4

2 に答える 2

1

問題は、「クリックした場合」がなく、セレクターの構文も間違っていることです-引用符がありません

「if」は、より適切な用語がないため、ユーザーがクリックした場合にのみ発生します

変化する：

if (#showVariables).click(function(){

に

$('#showVariables').click(function(){

編集：同じハイライト関数にさまざまな配列を渡すように再コーディングされました。デモでは、配列「words」と「keywords」の両方を使用します

デモ： http： //fiddle.jshell.net/dxPhK/

予約語「クラス」が正規表現にパスされるというまだ小さな問題

var words = ['Sample', 'count'];
var keywords = ['import', 'public', /*'class',*/ 'static', 'void', 'for', 'if', 'else'];
$(document).ready(function() {
    $('#showVariables').click(function() {
        $('.identifier').each(function(idx, el) {
            var $el=$(el)
            $el.html(hightLightHtml($el.html(), words, 'red'));
        })
    });
    $('#showKeywords').click(function() {
        $('.keyword').each(function(idx, el) {
           // console.log(idx)
            var $el=$(el)
            $el.html(hightLightHtml($el.html(), keywords, 'yellow'));
        })
    });


});


function hightLightHtml(wordsHtml, wordsArray, highlightClass) {
    $.each(wordsArray, function(idx, word) {
        var reg = new RegExp(word, 'g');
        wordsHtml = wordsHtml.replace(reg, '<span class="' + highlightClass + '" >' + word + '</span>');
    })
    return wordsHtml;
}
于 2012-06-19T02:30:20.023 に答える
1

デモ http://fiddle.jshell.net/rG6F9/13/（テキストをクリックするvaraiblesと、HTMLのアラートの前後が表示されます。

ハイライトはここで正常に機能します：http：//fiddle.jshell.net/8axss/20/（私はあなたのhtmlとスクリプトをクリーンアップしました）

ひや、複数のことが正しくありません：

1）$('#showVariables').click(function()

2）.identifierはクラスなので、を使用します.。

3）identifier以前はサンプル用の場所であった最も外側のスパンとして配置する必要があります。

残りは、以下のJqueryとhtmlを参照してください。

お役に立てれば、

コード

var words = ['Sample', 'count'];
var keywords = ['import', 'public', 'class', 'static', 'void', 'for', 'if', 'else'];
$(document).ready(function() {
    $('#showVariables').click(function() {
        alert($('.identifier').html());
        var wordsHtml = $('.identifier').html();
        $.each(words, function(idx, word) {
            var reg = new RegExp(word, 'g');
            wordsHtml = wordsHtml.replace(reg, '<span class="highlight" style="backgroun-color:yellow;">' + word + '</span>');

        })
           alert(" AFter HTML highlight == " + wordsHtml);
        $('#identifier').html(wordsHtml);
    });


});

HTML

<div id="menuDiv"><span id="showVariables" class="button">Variables</span><span id="showKeywords" class="button">Keywords</span></div>
<div id="codeDiv">
<br><span class="keyword">import</span> java.io.*;
<br>
<br><span class="keyword">public</span> <span class="keyword">class</span> <span class="identifier">Sample {

<br>&nbsp;&nbsp;<span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> main(String args[]) {
<br>&nbsp;&nbsp;&nbsp;&nbsp;</span>int</span> <span class="identifier">count</span> = 0;
</span>
于 2012-06-19T02:35:57.273 に答える