Форум

tantos · #1 (**permalink**) 11.11.2008, 16:15

Добрый день.
У меня такой вопрос, как можно обратиться к родительскому блоку элемента
вот есть например такой код

Код:

<div class="block">
                  <h4>Lorem ipsum</h4>
                  <dfn>Sed diam nonumy eirmod tempor invidunt ut labore et dolore. </dfn>
                  <a href="#" class="more">more info</a>
</div>

Так вот собственно, как по клику на <a href="#" class="more">more info</a> добавить класс для <div class="block">?

Octane · #2 (**permalink**) 11.11.2008, 16:27

function addClass() {
    this.parentNode.className += ' MyClassName';
    var e = arguments[0] || window.event;
    e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
var i, list = document.getElementsByClassName('more'), length = list.length, ie = 0 /*@cc_on + 1 @*/;
for(i = 0; i < length; i++) {
    if(ie) {
        var listener = function() {
            addClass.call(list[i]);
        };
        list[i].attachEvent('onclick', listener);
    }
    else list[i].addEventListener('click', addClass, false);
}

Метод «getElementsByClassName» работает только в новых браузерах, его кросс-браузерную реализацию можно посмотреть здесь.

tantos · #3 (**permalink**) 11.11.2008, 20:24

попробывал, вот так

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>

  <script language="JavaScript" type="text/javascript">
  /*<![CDATA[*/
function addClass() {
    this.parentNode.className += ' MyClassName';
    var e = arguments[0] || window.event;
    e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
var i, list = document.getElementsByClassName('more'), length = list.length, ie = 0 /*@cc_on + 1 @*/;
for(i = 0; i < length; i++) {
    if(ie) {
        var listener = function() {
            addClass.call(list[i]);
        };
        list[i].attachEvent('onclick', listener);
    }
    else list[i].addEventListener('click', addClass, false);
}
  /*]]>*/
  </script>
</head>

<body>
     <div class="block">
                  <h4>Lorem ipsum</h4>
                  <dfn>Sed diam nonumy eirmod tempor invidunt ut labore et dolore. </dfn>
                  <a href="javascript:addClass();" class="more">more info</a>
</div>
</body>

</html>

firebug выдает такую ошибку this.parentNode is undefined

Octane · #4 (**permalink**) 11.11.2008, 20:45

Нафига

href="javascript:addClass();"

если в скрипте уже добавлены обработчики

if(ie) {
        var listener = function() {
            addClass.call(list[i]);
        };
        list[i].attachEvent('onclick', listener);
    }
    else list[i].addEventListener('click', addClass, false);

?

tantos · #5 (**permalink**) 11.11.2008, 20:57

а чет оно не вызывает ее по клику

Octane · #6 (**permalink**) 11.11.2008, 21:52

Вы выполняете поиск элементов до того, как они появятся в документе

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script type="text/javascript">
window.onload = function() {
	function addClass() {
		 this.parentNode.className += ' MyClassName';
		 var e = arguments[0] || window.event;
		 e.preventDefault ? e.preventDefault() : e.returnValue = false;
	}
	var i, list = document.getElementsByClassName('more'), length = list.length, ie = 0 /*@cc_on + 1 @*/;
	for(i = 0; i < length; i++) {
		 if(ie) {
			  var listener = function() {
					addClass.call(list[i]);
			  };
			  list[i].attachEvent('onclick', listener);
		 }
		 else list[i].addEventListener('click', addClass, false);
	}
};
</script>
</head>
<body>
<div class="block">
	<h4>Lorem ipsum</h4>
	<dfn>Sed diam nonumy eirmod tempor invidunt ut labore et dolore. </dfn> <a href="#" class="more">more info</a> </div>
</body>
</html>

напомню, что «getElementsByClassName» надо доделать, чтобы работало везде…

tantos · #7 (**permalink**) 11.11.2008, 22:02

ага, спасибо

Форум

Справочник

Discord чат

Курсы javascript