Появление блоков по клику

@VladZV · Регистрация: 07.09.2017

Студворк — интернет-сервис помощи студентам

HTML5
1
2
3
4
5
6
7
8
9
<div class="screen">
            <img class="screen1" src="pictures/screen1.png">
            <img class="screen2" src="pictures/screen2.png">
            <img class="screen3" src="pictures/screen3.png">
            <img class="screen4" src="pictures/screen4.png">
            </div>
            <div class="button">
                <div class="push3">SHOW</div>
            </div>

вот такой вот HTML. Изначально на странице только screen1, остальные скрыты. И нужно, чтобы при каждом клике по кнопке появлялись следующие картинки. Т.е. один клик по кнопке-появляется одна картинка, еще раз кликаешь-еще одна картинка появляется. Надеюсь понятно))))

JavaScript
1
2
3
4
5
6
7
8
9
$(document).ready(function() {
    $('.push3').click (function() {
        $('.screen2').show('slow');
        $('.screen3').show('slow');
        $('.screen4').show('slow');
      
    });
 
});

@tisha_ · 07.09.2017, 14:58

VladZV, при клике получаете коллекцию картинок в блоке "screen", далее пробегаетесь циклом, если встречаете скрытую картинку - отображаете ее и выходите из цикла, так?

@VladZV · 07.09.2017, 15:07 **[ТС]**

ну на словах, то понятно)) я тоже так рассуждал) трудности с написанием кода)) голова уже кипит

@pincet · 07.09.2017, 15:34

$('.screen').find('.hidden').first().sho w('slow')
а, ну еще и класс hidden убери

@VladZV · 07.09.2017, 15:40 **[ТС]**

pincet, я так понимаю для screen2,3,4 нужно создать отдельный див с классом hidden?

@pincet · 07.09.2017, 15:40

https://jsfiddle.net/v3upyrLp/

@VladZV · 07.09.2017, 15:49 **[ТС]**

pincet, БОЛЬШОЕ СПАСИБО!! От души прям! Выручили

Новые блоги и статьи Все статьи Все блоги /
10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .	Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .
Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .

@tisha_ 61 / 61 / 36 Регистрация: 16.09.2015 Сообщений: 296
	07.09.2017, 14:58
	VladZV, при клике получаете коллекцию картинок в блоке "screen", далее пробегаетесь циклом, если встречаете скрытую картинку - отображаете ее и выходите из цикла, так? 0

@VladZV 0 / 0 / 1 Регистрация: 07.09.2017 Сообщений: 11
	07.09.2017, 15:07 [ТС]
	ну на словах, то понятно)) я тоже так рассуждал) трудности с написанием кода)) голова уже кипит 0

@pincet 1655 / 1154 / 173 Регистрация: 23.07.2010 Сообщений: 6,910
	07.09.2017, 15:34
	$('.screen').find('.hidden').first().sho w('slow') а, ну еще и класс hidden убери 0

@VladZV 0 / 0 / 1 Регистрация: 07.09.2017 Сообщений: 11
	07.09.2017, 15:40 [ТС]
	pincet, я так понимаю для screen2,3,4 нужно создать отдельный див с классом hidden? 0

@pincet 1655 / 1154 / 173 Регистрация: 23.07.2010 Сообщений: 6,910
	07.09.2017, 15:40
	Сообщение было отмечено VladZV как решение Решение https://jsfiddle.net/v3upyrLp/ 1

@VladZV 0 / 0 / 1 Регистрация: 07.09.2017 Сообщений: 11
	07.09.2017, 15:49 [ТС]
	pincet, БОЛЬШОЕ СПАСИБО!! От души прям! Выручили 0

Появление блоков по клику

Решение