Сделать смену картинки при клике на див

@Maksimus1991 · Регистрация: 17.01.2014

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

Все привет, мне нужно сделать смену картинки при клике на див. Таких картинок много. Поэтому встает задача сделать один скрип при помощи которого это можно реализовать, а не множить большое число функций. Для обычной смены картинки можно использовать такой код

PHP
1
2
3
4
5
6
function change_gallery_img1 (){
if($('#h2_gallery_list1 span img').attr('src') == "<?php bloginfo ('template_directory') ?>/images/gallery-on.png") {
$('#h2_gallery_list1 span img').attr("src","<?php bloginfo ('template_directory') ?>/images/gallery-off.png");
}
else {$('#h2_gallery_list1 span img').attr("src","<?php bloginfo ('template_directory') ?>/images/gallery-on.png");}
}

Но видно, что функция ривязана к определенному div который содержит картинку. А нужно чтобы было тоже самое но скажем через класс. Если отталкиваться от класса, то соответственно получается, что при клике на любой из div указанного класса изменятся все картинки, а не конкретна та по div которой совершили клик.

@Faust971 · 18.04.2014, 21:40

да там правильно

@Maksimus1991 · 18.04.2014, 21:54 **[ТС]**

HTML5
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<div class="teaserProduct">
    <table>
        <tr>
               <td rowspan="3">
            <div> 
                 <?php $car_available_img = get_post_meta($post->ID, 'car_available_img', $single = true); ?>
                 <a class="car_img"><?php if ($car_available_img != "") { echo $car_available_img; } ?>
            </div>  
            <div>
                 <?php $win_number = get_post_meta($post->ID, 'win_number', $single = true); ?>
                 <a><?php if ($win_number != "") { echo 'VIN '.$win_number; } ?></a>
            </div>
               </td>
               <td rowspan="3">
            <?php $complete_sets = get_post_meta($post->ID, 'complete_sets', $single = true); ?>
            <?php if ($complete_sets != "") { echo $complete_sets; } ?>
               </td>
               <td>
            <?php $engine_v = get_post_meta($post->ID, 'engine_v', $single = true); ?>
            <?php if ($engine_v != "") { echo $engine_v; } ?>
            <?php $engine = get_post_meta($post->ID, 'engine', $single = true); ?>
            <?php if ($engine != "") { echo $engine; } ?>
               </td>
               <td rowspan="3">
            <?php $price_car = get_post_meta($post->ID, 'price_car', $single = true); ?>
            <?php if ($price_car != "") { echo $price_car; } ?>
                </td>
                <td rowspan="3">
            <?php $price_car = get_post_meta($post->ID, 'price_car', $single = true); ?>
            <?php if ($price_car != "") { echo round($price_car/12, 2); } ?>
                 </td>
                <td rowspan="3">
            <a>Заказать автомобиль</a>
                 </td>
        </tr>
        <tr>
                 <td>
               <?php $transmission = get_post_meta($post->ID, 'transmission', $single = true); ?>
                      <?php if ($transmission != "") { echo $transmission; } ?>
                  </td>
        </tr>
        <tr>
                  <td>
                <?php $drive = get_post_meta($post->ID, 'drive', $single = true); ?>
                <?php if ($drive != "") { echo $drive; } ?>
                   </td>
        </tr>
    </table>
    </div>
             <div id="<?php echo 'elem-'.$post->ID; ?>" class='fullProduct <?php echo 'elem-'.$post->ID; ?>'>
            <?php echo 'Второй блок'; ?>
              </div>

Так?

@Faust971 · 18.04.2014, 22:10

Да вроде так, так пробуйте:

JavaScript
1
2
3
$(".car_img").on("click", function(){
$(this).parents(".teaserProduct").next(".fullProduct").slideToggle();
});

@Maksimus1991 · 18.04.2014, 22:31 **[ТС]**

Не работает) Я если честно хз. Мб вообще по другому попробовать придумать что-то? Все равно спасибо за помощь)

@Faust971 · 18.04.2014, 22:41

В браузере ошибки есть какие нибудь?

Код который в браузере скиньте, я щас у себя вашу структуру попробую.

Добавлено через 2 минуты
А вы случаем про ready не забыли)?

JavaScript
1
2
3
4
5
6
$(document).ready(function(){
$(".car_img").on("click", function(){
$(this).parents(".teaserProduct").next(".fullProduct").slideToggle();
});
 
});

@Maksimus1991 · 18.04.2014, 22:56 **[ТС]**

Хахах, я забыл ready ))) Спасибо вам)

Новые блоги и статьи Все статьи Все блоги /
Нейросеть на алгоритме "эстафета хвоста" как перспектива. Hrethgir 06.05.2026 На десерт, когда запущу сервер. Статья тут https:/ / habr. com/ ru/ articles/ 1030914/ . Автор я сам, нейросеть только помогает в вопросах которые мне не известны - не знаю людей которые знали-бы. . .	Асинхронный приём данных из COM-порта Argus19 01.05.2026 Асинхронный приём данных из COM-порта Купил на aliexpress термопринтер QR701. Он оказался странным. Поключил к Arduino Nano. Был очень удивлён. Наотрез отказывается печатать русские буквы. Чтобы. . .	попытка написать игровой сервер на C++ pyirrlicht 29.04.2026 попытка написать игровой сервер на плюсах с открытым бесконечным миром. возможно получится прикрутить интерпретатор питон для кастомизации игровой логики. что есть на текущий момент:. . .	Контроль уникальности выбранного документа-основания при изменении реквизита Maks 28.04.2026 Алгоритм из решения ниже разработан на примере нетипового документа "ЗаявкаНаРемонтСпецтехники", разработанного в КА2. Задача: уведомлять пользователя, если указанная заявка (документ-основание). . .
Благородство как наказание Maks 24.04.2026 У хорошего человека отношения с женщинами всегда складываются трудно. А я человек хороший. Заявляю без тени смущения, потому что гордиться тут нечем. От хорошего человека ждут соответствующего. . .	Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .	Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .

@Faust971 69 / 69 / 50 Регистрация: 25.03.2012 Сообщений: 241
	18.04.2014, 21:40
	да там правильно 0

@Maksimus1991 12 / 6 / 1 Регистрация: 17.01.2014 Сообщений: 135
	18.04.2014, 22:31 [ТС]
	Не работает) Я если честно хз. Мб вообще по другому попробовать придумать что-то? Все равно спасибо за помощь) 0

@Maksimus1991 12 / 6 / 1 Регистрация: 17.01.2014 Сообщений: 135
	18.04.2014, 22:56 [ТС]
	Хахах, я забыл ready ))) Спасибо вам) 0

Опции темы