不突出顯示文本的按鈕

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