Javascript Jquery在按enter按钮后不更改文本颜色_Javascript_Jquery_Html

Javascript Jquery在按enter按钮后不更改文本颜色

javascript jquery html

Javascript Jquery在按enter按钮后不更改文本颜色,javascript,jquery,html,Javascript,Jquery,Html,我正试图用jquery创建一个多彩的文本区域。它的工作原理很好，但当我按下回车键时，它并没有改变颜色。这是我的密码 <html> <script type="text/javascript" src="jquery/jquery-1.6.2.js"></script> <script type="text/javascript"> //<![CDATA[ //declearing of array of collored words va

我正试图用jquery创建一个多彩的文本区域。它的工作原理很好，但当我按下回车键时，它并没有改变颜色。这是我的密码

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


//  
$（“傻瓜”）
.keyup（函数（）{
var值=$（this.val（）；
$（“#傻瓜”）。文本（值）；
ColorDiv（词语、风格、“傻瓜”）；
})
.keyup（）；

我不知道怎么解决这个问题。

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

ColorDiv(words,color,'fool');

这应该是在这个函数的另一个调用中传递的样式吗

我创造了一把小提琴，我相信它能满足你的需要在fiddle中，我将所有JS移到了一个单独的文件中，以保持低调

该代码只适用于使用$（document）.ready（）而不是$（window）.load（）的我。我认为这是一个难题。

我修改了你的逻辑。你可以退房

var-style=[]；
var words=['function'，'var'，'editableText']；
样式['function']=“颜色：#772AC3；”；
样式['var']='color:red；'；
样式['editableText']=“颜色：#2A00FF；”；
//单词着色功能
函数ColorDiv（字、颜色、arr、id）{
对于（变量i=0；i”）；
var matchedIndex=words.indexOf（arr[i]）；
如果（匹配索引！=-1）{
arr[i]=“”+arr[i]+“”；
}
}
$（“#”+id）.html（arr.join（“”）；
}
//启动功能定义
$（window）.load（函数（）{//TODO:将其修改为文档就绪且在fn参数下
ColorDiv（单词、颜色、“傻瓜”）；
});
$（“傻瓜”）
.keyup（函数（）{//TODO:可以通过选择性调用ColorDiv进行优化
var值=$（this.val（）；
ColorDiv（单词、样式、值.split（新RegExp（“\\b”）），“傻瓜”）；
})

若要检查enter事件，请尝试使用此$（文档）。在（'keyup'，'#dool_txt'，函数（e）{if（e.keyCode==13）alert（“enter”）；}）；不提醒任何事情如果你在结果窗格的文本框中键入一个你选择的单词（函数、变量、可编辑文本），当你完成键入单词后，它应该会改变颜色。它工作得很好，当我在

文本区

中按

输入

时，有没有办法在该div中添加一个

？嘿，只是添加arr[i]=arr[i] .replace（/[\n\r]/g，“
”）；在匹配索引之前。我已更新了小提琴。

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