不突出显示文本的按钮

Question

我有这个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; 

。我可能在哪里错了？

Answer 1

演示http://fiddle.jshell.net/rG6F9/13/（点击varaibles文本，你会看到之前和之后的警报HTML。

突出显示将正常工作在这里：http://fiddle.jshell.net/8axss/20/（我清理了你的html，因为我们LL脚本）

你好，多的东西是不正确的：

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

2）.identifier是一类所以使用.。

3）identifier应该放置在较早的只有Sample的地方。

其余请参阅下面的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> 

Answer 2

问题是没有“如果点击”和语法选择也是错误的 - 缺少引号

“如果”，因为缺乏更好的术语，仅发生如果用户对点击

变化：

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

要

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

编辑：重新编码以通过不同的阵列到同样的高亮功能。演示使用两个阵列 “字” 和 “关键词”

DEMO：http://fiddle.jshell.net/dxPhK/

与保留字 '类' 还是小问题被pased成正则表达式

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; 
}