Javascript-форум - Перебираем массив

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Перебираем массив (https://javascript.ru/forum/misc/30954-perebiraem-massiv.html)

Перебираем массив

Хотел бы, чтоб посмотрели и сказали что правильно, а что нет (я новичок).

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

Вот что получилось:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>скрипт</title>
<script>
function openElement(id) {
	var idE = document.getElementById(id);
	var clE = document.getElementsByClassName("options");
	var elem, activeElement;
	
	for(var i = 0, len = clE.length; i < len; i += 1) {
		elem = clE[i].style.display;
		activeElement = clE[i];
		if ( elem == "block" ) break;
	}
	
	if ( elem == "block" ) {
		if ( idE.style.display == "block" ) {
			idE.style.display = "none";
		}
		else {
			activeElement.style.display = "none";
			idE.style.display = "block";
		}
	}
	else {
		idE.style.display = "block";
	}
}

function keyControl(event) {
	if (event.keyCode == 81) openElement("d1");       // Функция при нажатии q
	if (event.keyCode == 87) openElement("d2");       // Функция при нажатии w
	if (event.keyCode == 69) openElement("d3");       // Функция при нажатии e
	if (event.keyCode == 82) openElement("d4");       // Функция при нажатии r
}

window.addEventListener("keydown", keyControl, false);

</script>
</head>
<body>
<div class="options" id="d1" style="display:none; width:50px; height:50px; position:absolute; left:0px; background:red;"></div>
<div class="options" id="d2" style="display:none; width:50px; height:50px; position:absolute; left:50px; background:green;"></div>
<div class="options" id="d3" style="display:none; width:50px; height:50px; position:absolute; left:100px; background:blue;"></div>
<div class="options" id="d4" style="display:none; width:50px; height:50px; position:absolute; left:150px; background:black;"></div>
<span style="position:absolute; top:60px;">Нажми Q, W, E или R</span>
</body>
</html>

чтобы заработало, сделайте окно просмотра активным :)

Дзен-трансгуманист,
по идее да - посмотри на строки
8
13
18 - 20

Можно через запоминание предыдущего элемента (впрочем Дзен-трансгуманист об этом упомянул)

<div class="options" id="q" style="display:none; width:50px; height:50px; position:absolute; left:0px; background:red;"></div>
<div class="options" id="w" style="display:none; width:50px; height:50px; position:absolute; left:50px; background:green;"></div>
<div class="options" id="e" style="display:none; width:50px; height:50px; position:absolute; left:100px; background:blue;"></div>
<div class="options" id="r" style="display:none; width:50px; height:50px; position:absolute; left:150px; background:black;"></div>
<span style="position:absolute; top:60px;">Нажми Q, W, E или R</span>

<script>
window.onload = function () {

	function hide(id) {
		document.getElementById(id).style.display = 'none';
	}
	
	function show(id) {
		document.getElementById(id).style.display = 'block';
	}
	
	var curId = 'q';
	
	document.body.onkeyup = function (e) {
		e = e || event;
		switch (e.keyCode) {
			case 81: {
				hide(curId);
				show('q');
				curId = 'q';
				break;
			}
			case 87: {
				hide(curId);
				show('w');
				curId = 'w';
				break;
			}
			case 69: {
				hide(curId);
				show('e');
				curId = 'e';
				break;
			}
			case 82: {
				hide(curId);
				show('r');
				curId = 'r';
				break;
			}
		}
	}

}
</script>

PS:

Цитата:

Сообщение от Дзен-трансгуманист

При том функция addEventListener некроссбраузерная.

как и getElementsByClassName

Спасибо..

Про кроссбраузерность - учту.

А вот еще такой вопрос:

Есть элементы, доступные только по тегу

var a = document.getElementsByTagName("div");
a[0].style.display = "block";
a[1].style.display = "block";
a[2].style.display = "block";
a[3].style.display = "block";

Возможно ли совершить над ними действие, не обращаясь к каждому индивидуально?

В jQuery возможно сделать так:

$("div").css("display", "block");

А на чистом js?

или только через for возможно?

var div = document.getElementByTagName("div");
for(var i = 0, len = div.length; i < len; i += 1) {
    div[i].style.display = "block";

dmitry111,
Проще делать через css
добавляя класс active к активному ( для которого которого указание в css стиле - display:block!important;
всем элементам присваиваем класс - elem - который по умолчанию
display:none;

тогда переставляя класс - достаточно просто скрывать все кроме текущего, т.е активный элемент будет с двумя классами .elem.active

Deff,

это тоже вариант!
Спасибо!

В самом верхнем коде обнаружил ошибку в 18-ой строчке.
Из-за нее конструкция через некоторое время не срабатывала в firefox, opera.
Вместо:

if ( elem ) {

Надо

if ( elem == "block" ) {

А для чего вот это:

this.state = false;

это как-то связано с историей?