修改JavaScript函数，使其仅适用于指定的div，而不适用于所有div

Question

我具有执行所需动作的功能，并且运行良好。我只是不知道如何编辑它，使其仅适用于某个类。在这种情况下，类会比ID更好，因为某些字段是动态生成的，并且没有指定的ID。

如何编辑它，使其仅适用于类名？

function spanClicked() {
  var spanHtml = $(this).html();
  var editableText = $("<textarea />");
  editableText.val(spanHtml);
  $(this).replaceWith(editableText);
  editableText.focus();
  // setup the blur event for this new textarea
  editableText.blur(editableTextBlurred);
}

function editableTextBlurred() {
  var html = $(this).val();
  var viewableText = $("<span>");
  viewableText.html(html);
  $(this).replaceWith(viewableText);
  // setup the click event for this new div
  viewableText.click(spanClicked);
}

$(document).ready(function() {
  $("span").click(spanClicked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <span>Test</span>
  </li>
  <li>
    <span>Test2</span>
  </li>
  <li>
    <span>Test3</span>
  </li>
</ul>

Answer 1

您可以指定要选择的类，而不仅仅是使用div：

function spanClicked() {
  var spanHtml = $(this).html();
  var editableText = $("<textarea />");
  editableText.val(spanHtml);
  $(this).replaceWith(editableText);
  editableText.focus();
  // setup the blur event for this new textarea
  editableText.blur(editableTextBlurred);
}

function editableTextBlurred() {
  var html = $(this).val();
  var viewableText = $("<span>", {
    class: 'editable'
  });
  viewableText.html(html);
  $(this).replaceWith(viewableText);
  // setup the click event for this new div
  viewableText.click(spanClicked);
}

$(document).ready(function() {
  $(".editable").click(spanClicked);
});

.editable {
  color: red;
}

li {
  margin: 20px;
  font-family: arial;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <span>Test</span>
  </li>
  <li>
    <span class="editable">Test2</span>
  </li>
  <li>
    <span>Test3</span>
  </li>
</ul>