не работает 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, время: 04:07. |