javascript - 如何使用 JQuery 基于保存在本地存储中的内容向元素添加类？

Question

基本上，我正在制作一个 TODO 列表，功能是保存和删除记录，这些记录已经实现并标记为重要和标记为已完成，这是我遇到问题的功能。

这是我用来检索保存在本地存储中的元素作为数组的方法。

function get_todos() {
    var todos = new Array;
    var todos_str = localStorage.getItem('todo');
    if (todos_str !== null) {
        todos = JSON.parse(todos_str);
    }
    return todos;
}

这是我用来在本地存储中保存记录的方法

function add() {
    var task = "00"+document.getElementById('task').value;
    var todos = get_todos();
    todos.push(task);
    localStorage.setItem('todo', JSON.stringify(todos));

    show();

    return false;
}

如你所见，我在开头添加了两个00的记录，当TODO列表的那一项是“未完成”时第一个数字是0，当标记为完成时是1，第二个数字是0当该元素如果 TODO 列表“不重要”时，当它被标记为重要时为 1，为了更改本地存储中的这些数字，我这样做:-

//if the second digit is 0 then the task is not important
function markAsImportant(){
    var id = parseInt(this.getAttribute('id'));
    var todos = get_todos();
    var task = todos[id].replaceAt(1, "1");
    console.log(task);
    todos.splice(id, 0, task);
    todos.splice(id+1, 1);
    localStorage.setItem('todo', JSON.stringify(todos));
    show();

    return false;
} 

该方法已经得到很好的实现并且可以正常工作。

现在，知道了 TODO 的哪一项重要，哪一项不重要，我只想为第二个字符是 one 的项添加一个类，这就是我在这里尝试做的:-

function show() {
    var todos = get_todos();

    var html = '<div class="list">';
    for(var i=0; i<todos.length; i++) {
        //HERE HERE HERE HERE HERE
        if (todos[i].charAt(1) == '1') {
            console.log("important");
            $('.item').addClass('important');
        }
        else{
            console.log("not important");
        }

        html += '<div class="item"> <input type="checkbox" class="check" id="' + i  + '"> ' +' <div class="title">' +  todos[i].substring(2) +  '</div> <div class="tools"> <span class="tag" id="' + i  + '"> <img class="important-img" src="resources/important.png"> </span> <span class="delete remove "  id="' + i  + '"> <img src="resources/thrash.png"> </span> </div></div>';
    };
    html += '</div>';


    document.getElementById('todos').innerHTML = html;

    var deleteButtons = document.getElementsByClassName('remove');
    for (var i=0; i < deleteButtons.length; i++) {
        deleteButtons[i].addEventListener('click', remove);
    };

    var doneButtons = document.getElementsByClassName('check');
    for (var i=0; i < doneButtons.length; i++) {
        doneButtons[i].addEventListener('click', markAsDone);
    };

    var importantButtons = document.getElementsByClassName('tag');
    for (var i=0; i < importantButtons.length; i++) {
        importantButtons[i].addEventListener('click', markAsImportant);
    };

    var listItems = document.getElementsByClassName('item');
    for (var i=0; i < listItems.length; i++) {
        console.log(listItems[i]);
        $(listItems[i]).attr('id', i);
    };
}

但它根本不会向 .item 标签添加任何内容，我怎样才能让它真正将重要的类添加到我想要的元素中？

Answer 1

您没有将 html 添加到 DOM，因此 $(".item") 将不起作用。这应该有效:

for (var i = 0; i < todos.length; i++) {
  html += '<div class="item';
  if (todos[i].charAt(1) == '1') {
    console.log("important");
    html += ' important'; // The space must be there, so change just the "important" bit, but don't remove the space
  } else {
    console.log("not important");
  }
  html += '"><input type="checkbox" class="check" id="' + i + '"> ' + ' <div class="title">' + todos[i].substring(2) + '</div> <div class="tools"> <span class="tag" id="' + i + '"> <img class="important-img" src="resources/important.png"> </span> <span class="delete remove "  id="' + i + '"> <img src="resources/thrash.png"> </span> </div></div>';
}

粘贴此代替您的 for 循环并将结果发布在此答案下的评论中。