Форум

singmen · #1 (**permalink**) 23.08.2014, 14:07

Здравствуйте, появился вопрос, как мне реализовать показ сначала нескольких ID, а по клику на ссылочку всех имеющихся?
Например
<div id="qwer"></div>
<div id="qwer"></div>
<div id="qwer"></div>
<div id="qwer"></div>
<div id="qwer"></div>
показать из них только 3 с ссылкой "открыть все".

Erolast · #2 (**permalink**) 23.08.2014, 15:24

На странице не может быть нескольких элементов с одним и тем же идентификатором.

singmen · #3 (**permalink**) 23.08.2014, 16:48

Это пример для наглядности, можно заменить на class

tsigel · #4 (**permalink**) 23.08.2014, 21:37

<style>.qwer {display: none}</style>
<div class="qwer">1</div>
<div class="qwer">2</div>
<div class="qwer">3</div>
<div class="qwer">4</div>
<div class="qwer">5</div>
<button onclick="show(); return false">показать</button>
<script>
document.querySelector(".qwer").style.display = "block";
function show() {
   var a =  document.querySelectorAll(".qwer");
   for (var i = 0; i < a.length; i++) {
      a[i].style.display = "block";
   }
}
</script>

singmen · #5 (**permalink**) 25.08.2014, 02:39

tsigel, что-то я по твоему коду вообще ничего не понимаю, а как мне вывести определенное количество их?

tsigel · #6 (**permalink**) 25.08.2014, 13:57

singmen, исправил код. Сори писал с айпада

querySelectorAll возвращает массив (правда не совсем массив) элементов удовлетворяющих селектору. Потом бедим по нужному количеству и показываем.

ksa · #7 (**permalink**) 25.08.2014, 14:26

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

как мне реализовать показ сначала нескольких ID, а по клику на ссылочку всех имеющихся?

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

<!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'>
.qwer.off {
	display: none;
}
</style>
<script type='text/javascript'>
function show(Obj) {
	$(Obj.parentNode).find('.qwer.off').removeClass('off');
};
</script>
</head>
<body>

<div>
	<div class="qwer">1</div>
	<div class="qwer">2</div>
	<div class="qwer">3</div>
	<div class="qwer off">4</div>
	<div class="qwer off">5</div>
	<button onclick="show(this);">показать</button>
</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript