javascript - 编辑 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>