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

标签 javascript jquery css html

基本上,我正在制作一个 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 标签添加任何内容,我怎样才能让它真正将重要的类添加到我想要的元素中?

最佳答案

您没有将 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 循环并将结果发布在此答案下的评论中。

关于javascript - 如何使用 JQuery 基于保存在本地存储中的内容向元素添加类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41078395/

相关文章:

javascript - 运行带有 HTML 标签的用户脚本?

javascript - AngularJS 不适用于 Paypal

javascript - 在 asp.net mvc 中使用 RTL 输入的货币/小数输入

javascript - 轮播动画事件问题

CSS - 固定 div 元素的最大宽度不适用于填充

javascript - 尝试从点击事件 JS/jQuery 调用我的函数

javascript - Flash 播放器的视口(viewport)调整大小事件

javascript - 将月份数据复制到莫里斯条形图中的堆栈中

jquery - DataTables 获取服务器数据后设置 aoColumns

jquery - 使用 asp.net core 和 Jquery 从 ajax 请求将对象绑定(bind)到 asp mvc Controller