0

我有以下步骤 1。一个可编辑的 div，可以在其中键入一些文本。第 2 步。我单击 colorize words 并且可编辑 div 中的所有单词都包含在 span 中，每个都有唯一的 id。第 3 步。我可以选择 5 种不同的颜色并单击每个跨度以使其成为该颜色（向跨度添加一个类）。

现在我可以选择保存颜色格式的文本。

但是我也有一个名为“编辑文本”的按钮。单击此按钮，我可以再次编辑文本。

但我的问题是我如何让 jquery 记住我着色的单词？

我写的一个例子：

我是一个快乐的人。

我单击“着色”，可编辑的 div 变为不可编辑，并显示 5 种颜色。我选择绿色并点击“快乐”。我单击红色，然后单击“人”。我现在在 div 中有以下 html：

 <span id=1>I</span>
 <span id=2>am</span>
 <span id=3>a</span>
 <span id=4 class=green>happy</span>
 <span id=5 class=red>man</span>

所以现在我想编辑文本（点击“编辑文本”按钮）

所以我将文本更改为：

我是一个非常幸福的人

然后我单击“着色”并期望：

 <span id=1>I</span>
 <span id=2>am</span>
 <span id=3>a</span>
 <span id=6>very</span>
 <span id=4 class=green>happy</span>
 <span id=5 class=red>man</span>

我怎样才能做到这一点？或者，如果我删除了我希望跨度标签消失的单词之一？

我已经在这个问题上苦苦挣扎了一段时间，有什么想法吗？

4

1 回答 1

0

恐怕这会很复杂。您可以根据对象中的单词记住，但这意味着该单词的每个实例都会具有这种颜色。也许是这样的......

var wordColors = {};
var colorWord = function (word, color) {
  span.css('color', color);
  wordColors[word] = color;
}
var onEditEnd = function () {
  // process spans etc
  var c;
  for (var i = 0; i < spans.length; ++i) {
    if (c = wordColors[span.innerHTML])
      span.css('color', c);
  }
}
于 2013-02-25T22:00:53.787 回答