0

次のステップ 1 があります。テキストを入力できる編集可能な div。ステップ 2. colorize words をクリックすると、編集可能な div 内のすべての単語がそれぞれ一意の ID を持つスパンでラップされます。ステップ 3. 5 つの異なる色を選択し、各スパンをクリックしてその色にします (スパンにクラスを追加します)。

これで、色付きのテキストを保存することを選択できます。

ただし、「テキストの編集」というボタンもあります。このボタンをクリックすると、テキストを再度編集できます。

しかし、私の質問は、どの単語に色を付けたかをjqueryに記憶させるにはどうすればよいですか?

私が書く例：

私は幸せな男です。

「カラー化」をクリックすると、編集可能な div が編集不可になり、5 色が表示されます。緑色を選択し、「幸せ」をクリックします。赤い色をクリックし、「man」をクリックします。現在、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>

どうすればこれを達成できますか? または、単語の 1 つを削除すると、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 に答える