Как в скрипте обрабатывать по событию click несколько id

дмитрий728 · Регистрация: 15.04.2016

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

Есть скрипт спойлера который по клику на ссылку с id link1 открывает/закрывает блок look1 с текстом.
Проблема в том, что скрипт работает только на одном id.
Мне нужно чтоб скрипт работал с разными id , т.е. если просто присвоить один id(look1) всем блокам,то срабатывает на одном, только на первом блоке).
Подскажите как добавить в скрипт другие id , look2, look3 ... чтобы скрипт обрабатывал тот блок на котором событие click.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div id="look1" style="display: none;"> Тут текст.....</div>
<a id="link1" class="rectangle purple" data-text="Подробнее">Подробнee</a>
<script>
jQuery(document).ready(function(){
    jQuery('#link1').click(function(){
        if(jQuery.browser.msie && parseInt(jQuery.browser.version)==6){
            if(jQuery('#look1').css("display")=="none"){
                jQuery('#look1').css("display", "block");
            }
            else{
                jQuery('#look1').css("display", "none");
            }
        }
        else{
            jQuery('#look1').toggle("slow");
        }
        if(jQuery('#link1').text()=='Подробнее'){
            jQuery('#link1').text('Скрыть...');
        }
        else{
            jQuery('#link1').text('Подробнее');
        }
    });
});
</script>

Заранее спасибо!

@Андрюшатина · 30.08.2017, 22:43

Нужно внимательно почитать о том, что такое this

Давайте разберем пример на уточках.
У нас есть такой код:

JavaScript
1
2
3
4
5
//вешаем событие клика на класс  .spoiler
$(".spoiler").click(function(){
    //далее при клике, этот же класс будет или показывать или прятать свой класс.
                $(".spoiler").toggleClass("change_color");
            });

И тут подходим к вашей проблеме. - "А что, если у нас будет 10 таких классов?". Это же получается при клике, у всех будет меняться класс. А нам нужно менять класс только у того элемента, на который нажали. И тут к нам приходит на помощь "this"

Что же делает "this"?
Он говорит событию клик, что будет браться класс .spoiler но только тот, на который мы нажали. И в итоге код будет таким:

JavaScript
1
2
3
$(".spoiler").click(function(){ 
                $(this).toggleClass("change_color");
            });

Новые блоги и статьи Все статьи Все блоги /
Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.
Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .

Опции темы

Как в скрипте обрабатывать по событию click несколько id

Решение