проблема с наборомAttribute

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 = " ✔ "; 
     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 в массиве, а затем устанавливает его как «done» с помощью setAttribute. Однако сообщение консоли, которое я получаю для console.log (mark), является mark.setAttribute, не является функцией. Любые предложения о том, как я могу изменить это, чтобы я мог обновить объект в массиве как «сделан»?

Answer 1

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

или если «метка» в вашем примере не является объектом DOM, то вы бы просто установить это сделано свойство верно.

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

Answer 2

Установка класса с 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 3

Hey @ user2084813 Я знаю, что это будет немного переборщить, но это будет полезно в долгосрочной перспективе. JQuery имеет функции, которые работают с перекрестным браузером (никогда не проверяйте проверку), что позволяет вам проверять/добавлять/удалять классы. IE обычно обрабатывает удаление по-разному.

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

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

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