javascript - 所见即所得使每个单词都可点击？

Question

行。我有一个可编辑的 div，我可以在其中输入一些文本。但是进入后我有 3 个按钮：黑色、黄色和绿色。

我想要做的是然后单击即按钮“黑色”，然后单击我在可编辑区域中键入的每个单词。单击一个单词后，该单击的单词应该有一个 div class='black' 围绕它吗？

此外，如果再次单击相同的单词，我需要删除包装的 div（如果我愿意的话，我可以改变单词的颜色？）。

此外，如果我删除任何用 div 包裹的单词，我希望删除 div。

任何帮助表示赞赏？

提前致谢。

Answer 1

你在使用 jQuery 吗？你需要这样的东西：

function prepareDivContainer()
{
  // remove extra spaces
  var str = $("#editableDiv").text().replace(/[\s]+/g, ' ');

  // split the string by space into words
  var words = str.split(' ');

  // clear the content of the editable div
  $("#editableDiv").text('');

  // insert each word wrapped with a div
  for (var i = 0; i < words.length; i++)
  {
    $("#editableDiv").append('<div id="word'+i+'">'+words[i]+'</div>');
  }
}

在用户完成向 div 中插入文本后调用的此函数。它会将所有单词包装到div中。

因此，现在您可以通过绑定到点击事件来使这些 div（单词）可点击：

$(document).ready(function () {
  $("#editableDiv div").live("click", function(){
    // do something with the clicked word (div), e.g. add or remove css classes
    // look here: http://api.jquery.com/category/css/
  });
});