Как я могу изменить класс начальной загрузки для одного элемента, который является частью внутреннего HTML?

Question

Я делаю веб-страницу управления задачами. Когда задача создана, я добавляю некоторый внутренний HTML в DOM. Во внутреннем HTML есть метка состояния задачи с начальной загрузкой class = 'label label-info' по умолчанию. Это выглядит так:

Вид диспетчера задач

У меня также есть функция события кнопки, чтобы изменить эту метку состояния с «Открыть» на «Завершено». Я хочу сделать этот стиль метки от «label label-info» до «label label-success», когда я нажимаю кнопку.

Я пытался с 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');

Ожидаемый результат, когда я нажимаю кнопку «Завершить», текст метки изменится с «Открыть» на «Завершить», а стиль метки изменится с «метка метки-информация» на «метка метки- успех.

Фактический результат заключается в том, что когда я нажимаю кнопку «Завершить», текст метки изменяется с «Открыть» на «Завершить», но стиль метки не меняется, это все еще «информация метки метки» .

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();
}