Javascript 如何在单击按钮时替换已删除的跨度标记的类别

JSFIDLE上的问题示例：

我想允许用户单击div中的文本。他们单击的文本具有“highlights”类，悬停时背景颜色为灰色

<div class="article">
  <span class="highlights">article text here</span> <!-- click this text -->
</div>

单击文本时，单击的文本将转到另一个div，用户可以在其中对他们刚才突出显示的文本进行注释（为了简洁起见，我在本例中没有包括对文本进行注释的功能）

单击之后，“highlights”类将被删除。然后，他们可以选择对刚刚突出显示的文本撰写评论或取消突出显示。当它们取消另一个div中的突出显示时，原始div中的文本将使用以下代码返回其“突出显示”类：

$("body").on("click", ".highlights", function() {

   let highlightedText = $(this).text();

  $(this).removeAttr("class");

  let newContent = 
  "<div class='appendedDiv'>"+
    "<p>"+highlightedText+"</p>"+
    "<button class='cancelResponses'>Cancel</button>"+
  "</div>";

  let appended = $(newContent).appendTo(".result-container");

        $("body").on("click", ".cancelResponses", function() {

      let $text = $(".article");
      let textCurrent = $text.html().trim();
      let textToHighlight = highlightedText.trim();
      let ifTextExists = textCurrent.indexOf(textToHighlight) > -1;

      if (ifTextExists) {

        textCurrent = textCurrent.replace(textToHighlight, "<span class='highlights'>"+textToHighlight+"</span>");
        $text.html(textCurrent);

      }

      $(this).parent().remove();

    });

});

$（“body”）。在（“单击”，“突出显示”，函数（）上）{
让highlightedText=$（this.text（）；
$（此）.removeAttr（“类”）；
让newContent=
""+
“”+高亮显示文本+”
”+
“取消”+
"";
let added=$（newContent.appendTo（“.result容器”）；
$（“body”）。在（“单击”，“取消响应”，函数（）上）{
设$text=$（“.article”）；
让textCurrent=$text.html（）.trim（）；
让textToHighlight=highlightedText.trim（）；
让ifTextExists=textCurrent.indexOf（textToHighlight）>-1；
如果（如果存在）{
textCurrent=textCurrent.replace（textToHighlight，“+textToHighlight+”）；
$text.html（textCurrent）；
}
$（this.parent（）.remove（）；
});
});

我已经走到了这一步，它是有效的。问题是，当用户在取消后多次单击他们想要高亮显示的原始文本时（3次是在文本开始出错时），多个框开始附加到另一个div（

.result container

），而不是只附加一个。这是因为

span

s嵌套在用户单击的原始span中，现在没有“highlights”类。 我的问题是：

---

有没有一种方法，当用户单击“取消”按钮时，“highlights”类最初从中删除的

span

只会返回类“highlight”，而不是在原始

span

中嵌套更多的

span

？

您可以使用

---

您可以使用停止传播的事件

---

像这样的怎么样？ 我修改了您的代码，以利用另一个我称为

activated

的类来确定当前单击的跨度

$("body").on("click", ".highlights", function() {
  if($(this).hasClass('activated')) {
    return false;
  }

  let highlightedText = $(this).text();

  $(this).addClass("activated"); //Add an activated flag to the current clicked span

  let newContent = 
    "<div class='appendedDiv'>"+
      "<p>"+highlightedText+"</p>"+
      "<button class='cancelResponses'>Cancel</button>"+
    "</div>";

  let appended = $(newContent).appendTo(".result-container");

});

$("body").on("click", ".cancelResponses", function() {

   $('.highlights.activated').removeClass('activated');
   $(this).parent().remove();

});

$（“body”）。在（“单击”，“突出显示”，函数（）上）{
if（$（this）.hasClass（'activated'））{
返回false；
}
让highlightedText=$（this.text（）；
$（this）.addClass（“activated”）；//将激活标志添加到当前单击的范围
让newContent=
""+
“”+高亮显示文本+”
”+
“取消”+
"";
let added=$（newContent.appendTo（“.result容器”）；
});
$（“body”）。在（“单击”，“取消响应”，函数（）上）{
$（'.highlights.activated'）.removeClass（'activated'）；
$（this.parent（）.remove（）；
});

像这样的东西怎么样？ 我修改了您的代码，以利用另一个我称为

activated

的类来确定当前单击的跨度

$("body").on("click", ".highlights", function() {
  if($(this).hasClass('activated')) {
    return false;
  }

  let highlightedText = $(this).text();

  $(this).addClass("activated"); //Add an activated flag to the current clicked span

  let newContent = 
    "<div class='appendedDiv'>"+
      "<p>"+highlightedText+"</p>"+
      "<button class='cancelResponses'>Cancel</button>"+
    "</div>";

  let appended = $(newContent).appendTo(".result-container");

});

$("body").on("click", ".cancelResponses", function() {

   $('.highlights.activated').removeClass('activated');
   $(this).parent().remove();

});

$（“body”）。在（“单击”，“突出显示”，函数（）上）{
if（$（this）.hasClass（'activated'））{
返回false；
}
让highlightedText=$（this.text（）；
$（this）.addClass（“activated”）；//将激活标志添加到当前单击的范围
让newContent=
""+
“”+高亮显示文本+”
”+
“取消”+
"";
let added=$（newContent.appendTo（“.result容器”）；
});
$（“body”）。在（“单击”，“取消响应”，函数（）上）{
$（'.highlights.activated'）.removeClass（'activated'）；
$（this.parent（）.remove（）；
});

$("body").on("click", ".highlights", function(e) {
  e.stopPropagation();
  .....

$("body").on("click", ".highlights", function() {
  if($(this).hasClass('activated')) {
    return false;
  }

  let highlightedText = $(this).text();

  $(this).addClass("activated"); //Add an activated flag to the current clicked span

  let newContent = 
    "<div class='appendedDiv'>"+
      "<p>"+highlightedText+"</p>"+
      "<button class='cancelResponses'>Cancel</button>"+
    "</div>";

  let appended = $(newContent).appendTo(".result-container");

});

$("body").on("click", ".cancelResponses", function() {

   $('.highlights.activated').removeClass('activated');
   $(this).parent().remove();

});