Question

function Todo(id, task, who, dueDate) {
    this.id = id;
    this.task = task;
    this.who = who;
    this.dueDate = dueDate;
    this.done = false;
}


function updateDone(e) { 
      var spanClicked = e.target;
      var id = spanClicked.parentElement.id;
      spanClicked.innerHTML = "&nbsp;&#10004;&nbsp;";
      spanClicked.setAttribute("class", "done");
      console.log("you clicked this span" + id);


      for(var i = 0; i < todos.length; i++) {
        if (todos[i].id == id) {
            var mark = todos[i];
            mark.setAttribute("class", "done");
            console.log(mark);
            break;
            }
           } 
    }

此功能的第一部分更新网页以显示对象已“完成”。第二部分是我遇到问题的地方。我正在尝试将对象更新为数组内部的“完成”。我们的想法是将用户点击的id与数组中的id匹配，然后使用setAttribute将其设置为“done”。但是我为console.log（mark）获取的控制台消息是mark.setAttribute不是函数。关于如何修改这个的任何建议，以便我可以将数组中的对象更新为“完成”？

Answer 1

使用setAttribute设置类不是一个好主意。

//Works with FF and Chrome
obj.setAttribute("class", "done");

//works with IE
obj.setAttribute("className", "done");

//works with all browsers
obj.className = "done";

Answer 2

for(var i = 0; i < todos.length; i++) {
    if (todos[i].id == id) {
        var element = document.getElementById(todos[i].id);
        element.setAttribute("class", "done");
        console.log(element);
        break;
    }
}

或者如果示例中的“mark”不是DOM对象，那么您只需将其done属性设置为true即可。

for(var i = 0; i < todos.length; i++) {
    if (todos[i].id == id) {
        todos[i].done = true;
        console.log(todos[i]);
        break;
    }
}

Answer 3

嘿@ user2084813我知道这看起来有点矫枉过正，但从长远来看它会很有用。 JQuery具有跨浏览器工作的功能（永远不必检查验证），允许您检查/添加/删除类。 IE通常会以不同的方式处理。

http://api.jquery.com/hasClass/

http://api.jquery.com/addClass/

http://api.jquery.com/removeClass/

使用setAttribute时出现问题

3 个答案: