Форум Сайтостроение Веб-строительство

Помогите найти скрипт

12
Василич#
На сайте с 10.03.2009
Offline
111
Василич#
1549

Здравствуйте ! В общем, ситуация такая, есть вертикальные блоки вида:

БЛОК 1 (высота 200px)

БЛОК 2 (высота 200px)

БЛОК 3 (высота 200px)

БЛОК 4 (высота 200px)

БЛОК 5 (высота 200px) и т.д.

Нужен скрипт, который по умолчанию будет показывать только высоту 400px (т.е. 2 первых блока, остальные в hidden'е) и при нажатии на кнопку к примеру "+", добавлялся еще один блок (т.е. высота добавлялась +200px c каждым нажатием кнопки), т.е. нажал +, увидел 3й блок с hidden'a, нажал еще раз +, увидел плюс 4й блок и так далее...

Заранее спасибо, искал, ничего похожего не нашёл... в javscript собственными силами не силен в написании...

bmw-power.com.ua (https://bmw-power.com.ua)
SocFishing
На сайте с 26.09.2013
Offline
118
SocFishing
#1 

<script>

var blki=2;



function show(elements, specifiedDisplay) {

  elements = elements.length ? elements : [elements];

  for (var index = 0; index < elements.length; index++) {

    elements[index].style.display = specifiedDisplay || 'block';

  }

}



function showblock() { 

  window.blki++;

	var elements = document.querySelectorAll('#block-'+window.blki);

	show(elements);

}

</script>



<div id="block-1" style="height:200px;">Block 1</div>

<div id="block-2" style="height:200px;">Block 2</div>

<div id="block-3" style="height:200px;display: none;">Block 3</div>

<div id="block-4" style="height:200px;display: none;">Block 4</div>



<a href="#" onclick="showblock();">(Показать)</a>

https://jsfiddle.net/gczdwqn6/

★Сервис идентифицирует (https://socfishing.com/?utm_source=searchengines) посетителей вашего сайта и предоставляет их профили ВКонтакте, Телефон, Почта! Цены копеечные, работаем 8 лет.
S
На сайте с 30.09.2016
Offline
469
Sitealert
#2

Ужасно....

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
Василич#
На сайте с 10.03.2009
Offline
111
Василич#
#3

SocFishing, огромное спасибо !!!

S
На сайте с 30.09.2016
Offline
469
Sitealert
#4

Поскольку такой код является классикой жанра, а SocFishing проигнорировал мою реплику, позволю себе немного переписать это решение

<div class="block" style="height:200px;">Block 1</div>
<div class="block" style="height:200px;">Block 2</div>
<div class="block" style="height:200px;display: none;">Block 3</div>
<div class="block" style="height:200px;display: none;">Block 4</div>

<a id="link" href="javascript:showblock();">Показать</a>
<div id="nolink" style="display: none;">Показать</div>

<script>
var blki=2;
var elements = document.querySelectorAll('.block');

function showblock() {
    elements[blki].style.display = 'block';
    blki++;
    if(blki == elements.length){
        document.getElementById('link').style.display = 'none';
        document.getElementById('nolink').style.display = 'block';
    }
}
</script>
Правда, querySelectorAll не работает на старом IE, но может быть, это уже и не так важно. Или тогда уже другие функции использовать. Или для таких случаев показывать весь контент сразу. В общем, вариантов чуть больше, чем дофига.
Василич#
На сайте с 10.03.2009
Offline
111
Василич#
#5

Sitealert, большое спасибо ! Скажите, а можно ли как-то скрыть кнопку "Показать" если развёрнутые все блоки ?)

SocFishing
На сайте с 26.09.2013
Offline
118
SocFishing
#6

Мне так было проще накидать :)

По скрытию.

<div class="block" style="height:200px;">Block 1</div>
<div class="block" style="height:200px;">Block 2</div>
<div class="block" style="height:200px;display: none;">Block 3</div>
<div class="block" style="height:200px;display: none;">Block 4</div>

<a id="link" href="javascript:showblock();">Показать</a> 

<script>
var blki=2;
var elements = document.querySelectorAll('.block');

function showblock() {
    elements[blki].style.display = 'block';
    blki++;
    if(blki == elements.length){
        document.getElementById('link').style.display = 'none'; 
    }
}
</script>

https://jsfiddle.net/33bgm69q/

S
На сайте с 30.09.2016
Offline
469
Sitealert
#7

В принципе, я сделал так, чтобы она просто не работала. но если надо совсем скрыть, то просто убрать дополнительный элемент.

<div class="block" style="height:200px;">Block 1</div>

<div class="block" style="height:200px;">Block 2</div>

<div class="block" style="height:200px;display: none;">Block 3</div>

<div class="block" style="height:200px;display: none;">Block 4</div>



<a id="link" href="javascript:showblock();">Показать</a>



<script>

var blki=2;

var elements = document.querySelectorAll('.block');



function showblock() {

    elements[blki].style.display = 'block';

    blki++;

    if(blki == elements.length){

        document.getElementById('link').style.display = 'none';

    }

}

</script>


---------- Добавлено 18.02.2017 в 11:26 ----------

SocFishing, да не используйте Вы кнопку для показа PHP! На этом форуме квадратные скобки уродуются.

---------- Добавлено 18.02.2017 в 11:28 ----------

SocFishing:
Мне так было проще накидать :)
В том-то и дело, что "накидать" :). Я думал, Вы сразу отреагируете, не хотел влезать, но не вытерпел. :p
Василич#
На сайте с 10.03.2009
Offline
111
Василич#
#8

Огромное спасибо Вам обоим за помощь ! Вы мне очень сильно помогли !)

Василич#
На сайте с 10.03.2009
Offline
111
Василич#
#9

Прошу прощения за наглость, а можно ли добавить ещё кнопку "Удалить" чтобы работала по обратному принципу ?)

SocFishing
На сайте с 26.09.2013
Offline
118
SocFishing
#10

Наверно так:

<div class="block" style="height:200px;">Block 1</div>
<div class="block" style="height:200px;">Block 2</div>
<div class="block" style="height:200px;display: none;">Block 3</div>
<div class="block" style="height:200px;display: none;">Block 4</div>

<a id="link" href="javascript:showblock();">Показать</a>
<a id="link" href="javascript:hideblock();">Удалить</a>

<script>
var blki=2;
var elements = document.querySelectorAll('.block');

function showblock() {
elements[blki].style.display = 'block';
blki++;
if(blki == elements.length){
document.getElementById('link').style.display = 'none';
}
}

function hideblock() {
blki--;
elements[blki].style.display = 'none';
}
</script>
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий