按Enter键后Jquery不改变文本颜色

时间:2014-10-30 07:01:33

标签: javascript jquery html

我正在尝试用jquery创建一个彩色的textarea。它工作得很好但是当我按下回车键然后它没有改变颜色。 这是我的代码。

<html>
<script type="text/javascript" src="jquery/jquery-1.6.2.js"></script>
<script type="text/javascript">
//<![CDATA[

//declearing of array of collored words
var style = [];
var words = ['function','var','editableText'];
style['function'] = 'color:#772AC3;';
style['var'] = 'color:red;';
style['editableText'] = 'color:#2A00FF;';

//function for coloring words
function ColorDiv(words,color,id)
{
for (var index = 0; index < words.length; ++index) {
$("#"+id+":contains("+words[index]+")").each(function () {
    $(this).html($(this).html().replace(words[index], "<span class='red' style='"+color[words[index]]+"'>"+words[index]+"</span>"));
});
}
}

//start up functions definations
$(window).load(function(){
ColorDiv(words,color,'fool');

});//]]>  


</script>
<textarea id="fool_txt"></textarea>
<div id="fool"></div>

 <script>
 $( "#fool_txt" )
.keyup(function() {
 var value = $( this ).val();
 $( "#fool" ).text( value );
 ColorDiv(words,style,'fool');
})
.keyup();

</script>

我不知道如何解决这个问题。    

2 个答案:

答案 0 :(得分:1)

我修改了你的逻辑。您可以查看this fiddle

var style = [];
var words = ['function', 'var', 'editableText'];
style['function'] = 'color:#772AC3;';
style['var'] = 'color:red;';
style['editableText'] = 'color:#2A00FF;';

//function for coloring words
function ColorDiv(words, color, arr, id) {
    for (var i = 0; i < arr.length; i++) {
        arr[i] = arr[i].replace(/[\n\r]/g,"<br/>");
        var matchedIndex = words.indexOf(arr[i]);
        if (matchedIndex !== -1) {
            arr[i] = "<span class='red' style='" + color[words[matchedIndex]] + "'>" + arr[i] + "</span>";
        }
    }
    $("#" + id).html(arr.join(" "));
}

//start up functions definations
$(window).load(function () {//TODO: modify this to document ready and below fn param
    ColorDiv(words, color, 'fool');

});

$("#fool_txt")
    .keyup(function () {//TODO: can be optimized by selective invoking ColorDiv
    var value = $(this).val();
    ColorDiv(words, style, value.split(new RegExp("\\b")), 'fool');
})

答案 1 :(得分:0)

最初调用ColorDiv函数时使用未定义的变量 color

ColorDiv(words,color,'fool');

这是否应该是 style 在另一个函数调用中传递?

我创造了一个小提琴,我相信你想要它做http://jsfiddle.net/ux3yph9j/ 在小提琴中,我将所有的JS移动到一个单独的文件中,以保持不引人注目。

代码只对我使用$(document).ready()而不是$(window).load()。我认为这就像是小提琴一样。