如何更改作为内部 html 一部分的一个元素的引导类？

Question

我正在制作一个任务管理网页。创建任务时，我将一些内部 HTML 添加到 DOM。在内部 HTML 中，有一个任务状态标签，默认情况下 bootstrap 为 class= 'label label-info'。它看起来像这样：

Task manager view

我还有一个按钮事件函数可以将此状态标签从“打开”更改为“已完成”。当我单击按钮时，我想将此标签样式从“标签标签信息”变为“标签标签成功”。

我尝试使用 JQuery，但由于某种原因它无法正常工作。我是一个新手，请告诉我我哪里做错了。

以下是创建任务时添加内部HTML的代码：

var tasks = JSON.parse(localStorage.getItem('tasks'));

  tasksList.innerHTML = '';

  for (var i = 0; i < tasks.length; i++) {
    var id = tasks[i].id;
    var name = tasks[i].name;
    var importance = tasks[i].importance;
    var taskDate = tasks[i].date;
    var note = tasks[i].note;
    var status = tasks[i].status;    

    tasksList.innerHTML += '<div class="well">' +
      '<h6>Task ID: ' + id + '</h6>' +
      '<p><span class="label label-info" id="statusLabel">' + status + '</span></p>' +
      '<h3>' + name + '</h3>' +
      '<p><span class="glyphicon glyphicon-fire"></span> ' + importance + '</p>' +
      '<p><span class="glyphicon glyphicon-calendar"></span> ' + taskDate + '</p>' +
      '<p><span class="glyphicon glyphicon-comment"></span> ' + note + '</p>' +
      '<a href="#" onclick="setStatusCompleted(\'' + id + '\')" class="btn btn-success">Complete</a> ' +
      '<a href="#" onclick="deleteTask(\'' + id + '\')" class="btn btn-danger">Delete</a>' +
      '</div>';

下面是按钮事件函数改变标签文本和样式的代码：

function setStatusCompleted(id) {
  var tasks = JSON.parse(localStorage.getItem('tasks'));

  for (var i = 0; i < tasks.length; i++) {
    if (tasks[i].id == id) {
      tasks[i].status = 'Completed';
      $("#statusLabel").removeClass('label label-info').addClass('label label-success');

    }
  }

  localStorage.setItem('tasks', JSON.stringify(tasks));

  fetchTasks();
}

如您所见，我添加了 JQuery 行以删除样式并添加新样式，为什么它不起作用？

$("#statusLabel").removeClass('label label-info').addClass('label label-success');

预期的结果，当我单击完成按钮时，标签的文本将从“打开”更改为“完成”，标签的样式也会从“标签标签信息”更改为“标签标签-成功”。

实际结果是，当我点击Complete按钮时，标签的文字从'Open'变成了'Complete'，但是标签的样式没有改变，仍然是'label label-info' .

Answer 1

您不会尝试访问 jQuery 函数而实际上没有 JS 来访问 jQuery 吗？尝试将 jQuery 函数嵌套在 jQuery 访问函数中，并确保将 jQuery 库链接到文档，如下所示：

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

或来自任何其他 jQuery 库供应商。此外，如果您从 jQuery 官方网站下载它，您实际上也可以在文档中包含该库，只需确保正确访问它，如上所示。

另外，你为什么要删除 label 类然后再添加它？也许背后有我看不到的原因，但试试这个，让我知道它是否有效：

function setStatusCompleted(id) {
  var tasks = JSON.parse(localStorage.getItem('tasks'));

  for (var i = 0; i < tasks.length; i++) {
    if (tasks[i].id == id) {
      tasks[i].status = 'Completed';
      $(function() {
        $("#statusLabel").removeClass('label-info').addClass('label-success');
      });
    }
  }

  localStorage.setItem('tasks', JSON.stringify(tasks));

  fetchTasks();
}