jquery - 按钮不突出显示文本

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

问题是没有“如果单击”并且选择器的语法也错误 - 缺少引号

“如果”，由于缺乏更好的术语，只有当用户点击时才会发生

改变：

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

Answer 2

演示 http://fiddle.jshell.net/rG6F9/13/（单击varaibles文本，您将看到 HTML 警报前后。

突出显示在这里可以正常工作：http: //fiddle.jshell.net/8axss/20/（我已经清理了你的html以及脚本）

嗨，很多事情都不正确：

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>