Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.09.2016, 15:12
Новичок на форуме
Отправить личное сообщение для samp Посмотреть профиль Найти все сообщения от samp
 
Регистрация: 29.09.2016
Сообщений: 1

не работает function(event)
Добрый день.
У меня не работает Function(event).
Пытаюсь привязать функцию, при нажатии на какой-либо из элементов списка, нашим li будет добавляться либо убираться класс .done
к сожалению, не выходит

Просьба к более опытным товарищам помочь

имеется вот такой 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');
}
Ответить с цитированием
  #2 (permalink)  
Старый 29.09.2016, 16:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

делегирование для меню
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>
Ответить с цитированием
  #3 (permalink)  
Старый 29.09.2016, 16:47
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от samp
Просьба к более опытным товарищам помоч
Сначала нужно делать тестовые примеры нормальные...
<!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>
Ответить с цитированием
  #4 (permalink)  
Старый 29.09.2016, 18:17
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Все у него правильно, кроме этого

Сообщение от samp
this.classList.toggle('done');
Зачем this, если передается элемент. Его и бери

function toToggle(el) {el.classList.toggle('done');}

Ну, и смысл этой функции не ясен. Тогда уж toggleDone(){}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
JS: работает на сервере, не работает из папки -majestic- Общие вопросы Javascript 2 02.08.2012 14:41
Не работает push! Динамическая вставка TSEH25 ExtJS 5 03.07.2012 13:00
jQyery функция странно работает! Midel Общие вопросы Javascript 4 08.04.2012 13:40
помогите найти ошибку (работает в IE но не работает в Firefox) Len4ik Javascript под браузер 2 11.05.2010 15:41
Safari + ajax некорректно работает, а в других работает demi AJAX и COMET 35 15.07.2009 14:11