如何更改jQuery中单词的颜色

我将如何选择单词并更改该单词的颜色？如何更改jQuery中单词的颜色

例如添加样式的跨度并改变字体颜色。

有人能带我走下正确的道路请。

jQuery的

function edit_addon (div_id) {  
    $("#"+div_id).attr ('contentEditable', true) 
      .css ('color','#F00') 
      .css ('cursor','Text') 
      ; 

}

HTML

<div id="34" ondblclick="javascript:edit_addon(34)">Editable Text</div>

谢谢

来源

2010-09-07 Rickstar

'id'属性不能以HTML中的数字开头，您的代码将无法验证。他们必须以[A-Za-z]开头 - http://www.w3.org/TR/REC-html40/types.html#type-name – 2010-09-07 23:01:20

最简单的方法是在div中动态地添加人员跨度并只改变当前跨度的颜色。基本思想如下：

$(".Editable").dblclick(function() { 
    var words = $(this).text().split(" "); 
    var result = ""; 
    for (var i=0; i<words.length; i++) { 
     result.append("<span class='word'>" + words[i] + "</span>"); 
    } 
    $(this).innerHTML = result; 
} 

#CSS 

span.word:hover { color: #0f0; }

来源

2010-09-07 23:00:46

您应该避免在数组中使用'for ... in'。 'for ... in'用于迭代对象属性，所以如果数组原型已被修改，那么这些属性名称将包含在结果中。 – 2010-09-07 23:10:43

@安迪E，谢谢，我在语言之间做了太多的心智转换。编辑:) – 2010-09-08 01:36:02

这应该为你工作。一般来说，给你的元素一个类，然后在你的ready函数（这里简短地看到）你可以设置页面的任何动态方面。

<style type="text/css"> 
    .Word { color:#F00;cursor:text;padding:20px; } 
</style> 
<script type="text/javascript"> 
    $(function() { 
     $("div.Editable").each(function() { 
      var elem = $(this), 
       text = elem.text(), 
       words = text.split(" "), 
       innerHtml = "<span>" + words.join("</span>&nbsp;<span>") + "</span>"; 
      elem.html(innerHtml); 
     }); 
     $("div.Editable span").live("dblclick", function (evt) { 
      $(this) 
      .attr({ contentEditable: true }) 
      .addClass("Word"); 
     }).live("mouseout", function() { 
      var elem = $(this); 

      elem 
      .attr({ contentEditable: false }) 
      .removeClass("Word"); 

      var text = elem.text(), 
       words = text.split(" "), 
       innerHtml = "<span>" + words.join("</span>&nbsp;<span>") + "</span>"; 

      elem.replaceWith($(innerHtml)); 
     }); 
    }); 
</script> 

<div id="Editable34" class="Editable"> 
    Editable Editable Editable 
</div>

来源

2010-09-07 22:51:17 ChaosPandion

唯一的问题是当一个词中有多个词时' div'，整个事情将变得可编辑。 – 2010-09-07 22:52:52

@SimpleCoder - 我的阅读理解再次失败，让我解决这个问题。 – ChaosPandion 2010-09-07 22:55:12

@SimpleCoder - 我对此并不满意，但我现在无法做OPs工作吗？ – ChaosPandion 2010-09-07 23:22:46

如何更改jQuery中单词的颜色

回答

相关问题