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。

因此，现在您可以通过绑定到click事件来使这些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/
  });
});

Wysiwyg让每个单词都可点击？

1 个答案: