Форум

razorg1991 · #1 (**permalink**) 27.08.2013, 14:26

Нашел хороший скрипт, который выравнивает высоту блоков с одним и тем же классом блока, относительно высоты самого заполненного.

window.onload = function() {
  setTimeout(function() {
      var mainDivs = document.getElementsByClassName("blok1");
      var maxHeight = 0;
      for (var i = 0; i < mainDivs.length; ++i) {
        if (maxHeight < mainDivs[i].clientHeight) {
          maxHeight = mainDivs[i].clientHeight; 
        }
      }
      for (var i = 0; i < mainDivs.length; ++i) {
        mainDivs[i].style.height = maxHeight + "px";
      }
    }, 1000);
}

Но возникла маленькая проблема. Мне нужно выравнивание нескольких блоков с разными классами.
Т.е. допустим есть блоки с классом "blok1", я их выровнял.
Теперь нужно еще выровнять все блоки с классом "blok2".
Если ниже написать тот же код только с классом "blok2" (в том де js файле где и этот скрипт), то выравнивание происходит теперь только для блоков с классом "blok2".

Я в js не силен. Никто не подскажет как допилить это скрипт, чтобы он работал и для других классов тоже?

ksa · #2 (**permalink**) 27.08.2013, 14:28

Сообщение от razorg1991

как допилить это скрипт, чтобы он работал и для других классов тоже?

Открой для себя параметры функций и циклы...

Сообщение от razorg1991

Я в js не силен.

А, ну да...

А в чем силен?

razorg1991 · #3 (**permalink**) 27.08.2013, 14:46

Сообщение от ksa

Открой для себя параметры функций и циклы...

А, ну да...

А в чем силен?

ну php более менее знаю, он как-то попроще

ksa · #4 (**permalink**) 27.08.2013, 14:48

Сообщение от razorg1991

ну php более менее знаю, он как-то попроще

Там так же есть функции, параметры функций и циклы...

razorg1991 · #5 (**permalink**) 27.08.2013, 14:58

Циклы говорите... Т.е. обернуть скрипт в цикл пока он его не выполнит для всех классов? Только камнями не кидайте, если бред сейчас написал

ksa · #6 (**permalink**) 27.08.2013, 14:58

Сообщение от razorg1991

Т.е. обернуть скрипт в цикл пока он его не выполнит для всех классов?

Неее. Не так.

Как вариант...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function() {
	var a=[
		'blok1',
		'blok2',
		'blokN'
	];
	for (var i=0; i<a.length; i++) {
		setTimeout((function(Name) {
			return function () {correctionHeight(Name);};
		})(a[i]), 1000);
	};
};
function correctionHeight(Name) {
	/* две стороки ниже убрать */
	alert(Name);
	return
	var mainDivs = document.getElementsByClassName(Name);
	var maxHeight = 0;
	for (var i = 0; i < mainDivs.length; ++i) {
		if (maxHeight < mainDivs[i].clientHeight) {
			maxHeight = mainDivs[i].clientHeight; 
		}
	}
	for (var i = 0; i < mainDivs.length; ++i) {
		mainDivs[i].style.height = maxHeight + "px";
	}
};
</script>
</head>
<body>
</body>
</html>

ksa · #7 (**permalink**) 27.08.2013, 15:02

Или вовсе поколхозному...

window.onload = function() {
	setTimeout(function() {
		correctionHeight('blok1');
	}, 1000);
	setTimeout(function() {
		correctionHeight('blok2');
	}, 1000);
	setTimeout(function() {
		correctionHeight('blokN');
	}, 1000);
};

ksa · #8 (**permalink**) 27.08.2013, 15:03

Или всех скопом!

window.onload = function() {
	setTimeout(function() {
		correctionHeight('blok1');
		correctionHeight('blok2');
		correctionHeight('blokN');
	}, 1000);
};

razorg1991 · #9 (**permalink**) 27.08.2013, 15:10

Ааааа. Заработало

Первый вариант! СПАСИБО))))
Т.е. как я понял первая часть что-то вроде перебирает классы, а вторая уже непосредственно делает дело?

ksa · #10 (**permalink**) 27.08.2013, 15:17

Сообщение от razorg1991

перебирает классы

Там нет никаких классов...

Форум

Справочник

Discord чат

Курсы javascript