使用JavaScript单击事件处理程序更改标签

Question

我正在尝试删除“待处理”标签，并希望添加新的“完成”标签。 请在下面找到我到目前为止编写的代码。此代码有效，但Pending标签现在位于Done标签的旁边。我以为前者可以被删除。

$(document).on('click','.pending', function() {
    var li_node = $(this).parent();
    li_node.append('<span class="label success">Done!</span>');
    li_node.remove('<span class="label pending">Pending</span>');
    li_node.addClass('completed');
});

我工作的截图。我可以摆脱Pending标签并只留下Done标签吗？

这是html代码：我正在关注一个在线教程，这个教程似乎是为你设计一个经验丰富的JS教练;

<div id="container">
  <h1>Wish List</h1>
  <ol id="items">
    <!-- Items will be added here -->
  </ol>
  <span class="total"></span>
  <br/>
  <input type="text" id="item"/>
  <button id="add-to-list">Add to list</button>
</div>

有些东西告诉我，我应该为这个问题添加一个新主题，但这意味着重复所有以前的代码......如果我违反规则，请告诉我。

我不知道如何编写一个jQuery选择器，在JavaScript控制台中使用.length属性选择所有挂起的标签。我正在使用所有以前的代码，这是我正在使用的浏览器列表的屏幕截图。我需要获取待处理标签的数量和已完成标签的数量。

Answer 1

不要添加和删除内容，只需更改标签的类和文本：

$(document).on('click','.pending', function() {
    var li_node = $(this).parent();
    li_node.children('.label.pending').removeClass("pending").addClass("success").text("Done!");
    li_node.addClass('completed');
});

Answer 2

$(document).on('click','.pending', function() {
    var li_node = $(this).parent();
    li_node.append('<span class="label success">Done!</span>');
    li_node.children(".label.pending").remove();
    li_node.addClass('completed');
});

Answer 3

这是一个有效的解决方案，我在变量之前使用$ 当它是一个jQuery对象时的名字。如果您之后删除该项目 你得到其父元素的选择器。然后调用删除$（这）它的工作原理。

$(document).on('click', '.pending', function () {
    var $li_node = $(this).closest('li');
    $(this).remove();
    $li_node.append('<span class="label success">Done!</span>').addClass('completed');          
});