如何在jquery中更改單詞的顏色

Question

我如何能夠選擇一個單詞並改變那個單詞的顏色？

例如，添加帶樣式的跨度並使字體顏色變化。

請有人帶領我走正確的道路。

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>

謝謝，

Answer 1

最簡單的方法是在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; }

Answer 2

這應該適合你。 一般來說，為元素提供一個類，然后在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>