如何更改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中單詞的顏色

回答

相關問題