не работает function(event)
Добрый день.
У меня не работает Function(event). Пытаюсь привязать функцию, при нажатии на какой-либо из элементов списка, нашим li будет добавляться либо убираться класс .done к сожалению, не выходит :cray: Просьба к более опытным товарищам помочь :) имеется вот такой js(могу скинуть html) : var todo = document.getElementById('todo'); //наш ul todo.onclick = function(event) { var target = event.target; if(target.tagName != 'li') { return; } else { toToggle(target); } } function toToggle() { this.classList.toggle('done'); } |
делегирование для меню
samp,
https://learn.javascript.ru/event-delegation <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .done { background-color: #FF00FF; } </style> <script> window.addEventListener("DOMContentLoaded", function() { var todo = document.getElementById("todo"); todo.addEventListener("click", function(event) { event.preventDefault(); var target = event.target; while (target != todo) { if (target.tagName == "LI") { target.classList.toggle("done"); break } target = target.parentNode } }) }); </script> </head> <body> <ul id="todo"> <li><a href="home.htm">Home</a></li> <li><a href="products.htm">Products</a></li> <li><a href="services.htm">Services</a></li> <li><a href="about.htm">About Us</a></li> <li><a href="contact.htm">Contact</a></li> </ul> </body> </html> |
Цитата:
<!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=windows-1251' /> <script src='http://code.jquery.com/jquery-latest.js'></script> <!-- <script src="https://code.angularjs.org/1.3.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.3.9/angular-route.js"></script> --> <style type='text/css'> .done { color: red; } </style> <script type='text/javascript'> </script> </head> <body> <ul id='todo'> <li>Item 0</li> <li>Item 1</li> </ul> <script type='text/javascript'> var o = document.getElementById('todo'); o.onclick = function(event) { var target = event.target||event.srcElement; if (target.tagName == 'LI') { toToggle(target); }; }; function toToggle(Obj) { Obj.className=(Obj.className=='done')? '': 'done'; } </script> </body> </html> |
Все у него правильно, кроме этого
Цитата:
function toToggle(el) {el.classList.toggle('done');} Ну, и смысл этой функции не ясен. Тогда уж toggleDone(){} |
Часовой пояс GMT +3, время: 00:02. |