1

Ok。テキストを入力できる編集可能な div があります。ただし、入力すると、黒、黄、緑の 3 つのボタンがあります。

私ができるようにしたいのは、「黒」ボタンをクリックしてから、編集可能領域に入力した各単語をクリックすることです。単語をクリックした後、クリックされた単語には div class='black' がラップされているはずですか?

また、同じ単語が再度クリックされた場合は、ラップされた div を削除する必要があります (そうすれば、単語の色を変えることができます)。

さらに、div で囲まれた単語を削除すると、div が削除されます。

何か助けていただければ幸いです。

前もって感謝します。

4

1 に答える 1

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/
  });
});
于 2012-07-01T22:42:02.293 に答える