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

@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 которой совершили клик.

@Lazy_Den · 01.04.2014, 14:13

Вообще, такие вещи проще делать через изменение классов и использовать изображение бекграундом у какого-нибудь элемента.

JavaScript
1
2
3
$('div').click(function(){
    $('span', this).toggleClass('but_off but_on');
});

Но можно изменять атрибут у тэга <img>, хотя на мой взгляд - менее удобно.

JavaScript
1
2
3
4
5
6
7
8
9
10
var sw = 0,
images = [
    'http://findicons.com/files/icons/129/soft_scraps/128/button_turn_on_01.png',
    'http://www.lucidica.com/wp-content/uploads/power-button.png'    
];
$('div').click(function(){
    sw = $(this).data('switch');
    $('img', this).attr('src',images[sw]);
    $(this).data('switch', (sw === 0 ? 1 : 0));
});

@Maksimus1991 · 18.04.2014, 15:27 **[ТС]**

А можно чуть поподробнее? Switch это имя элемента?

@Faust971 · 18.04.2014, 18:28

switch это наименование привязываемых данных к элементу.

@Maksimus1991 · 18.04.2014, 18:53 **[ТС]**

Помоги если можешь советом, я уже с этой проблемой не первый день бьюсь, отложил, а сейчас опять надобность возникла. В общем нужно, чтобы при клике на изображение машины снизу появлялся div (то еть идет смена класса с invisible на visible). Кликаем на изображение которое пометил 1 и появляется вся область 2 (div с всяким наполнением).

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

Изображение

@Faust971 · 18.04.2014, 19:07

Html структуру этих областей выложи.

@Maksimus1991 · 18.04.2014, 19:26 **[ТС]**

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
<table>
    <tr>
        <td rowspan="3">
        <div> 
            <?php $car_available_img = get_post_meta($post->ID, 'car_available_img', $single = true); ?>
            ?php if ($car_available_img != "") { echo $car_available_img; } ?>
        </div>  
        <div>
            <?php $win_number = get_post_meta($post->ID, 'win_number', $single = true); ?>
            <?php if ($win_number != "") { echo 'VIN '.$win_number; } ?>
        </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 id="<?php echo 'elem-'.$post->ID; ?>" class='expanded_search_visible gallery_no1'>
    <?php echo 'Тут наполнение области 2 будет' ?>
</div>

На php не обращай внимание это добавление данных из WP.

@Faust971 · 18.04.2014, 19:32

Нужно чтобы на дивах висели классы какие нибудь.

@Maksimus1991 · 18.04.2014, 19:38 **[ТС]**

На дивах области 2? Если да, то там можно любой класс повесить или даже уникальный, например так

HTML5
1
2
3
<div id="<?php echo 'elem-'.$post->ID; ?>" class='expanded_search_visible <?php echo 'elem-'.$post->ID; ?>'>
    <?php echo 'Наполнение области 2'; ?>
</div>

Каждый div области 2 будет с class elem-(id поста).

@Faust971 · 18.04.2014, 20:00

Допустим у каждой ячейки такие классы они должны быть у всех дивов в ячейках одинаковые.

HTML5
1
2
3
4
5
6
7
8
<div class="teaserProduct"> 
            <?php $car_available_img = get_post_meta($post->ID, 'car_available_img', $single = true); ?>
            ?php if ($car_available_img != "") { echo $car_available_img; } ?>
        </div>  
        <div class="fullProduct">
            <?php $win_number = get_post_meta($post->ID, 'win_number', $single = true); ?>
            <?php if ($win_number != "") { echo 'VIN '.$win_number; } ?>
        </div>

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

@Maksimus1991 · 18.04.2014, 20:10 **[ТС]**

То есть если я тебя правильно понял, каждая таблица (краткое описание товара) должна быть в div с одинаковым классом? А не получится ли тогда что при клике на область 1 откроется полное описание всех продуктов сразу?

@Faust971 · 18.04.2014, 20:20

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<td> // 1 ячейка 
<div class="teaserProduct"> 
            <?php $car_available_img = get_post_meta($post->ID, 'car_available_img', $single = true); ?>
            ?php if ($car_available_img != "") { echo $car_available_img; } ?>
        </div>  
        <div class="fullProduct">
            <?php $win_number = get_post_meta($post->ID, 'win_number', $single = true); ?>
            <?php if ($win_number != "") { echo 'VIN '.$win_number; } ?>
        </div>
</td>
<td>// вторая ячейка
<div class="teaserProduct"> 
            <?php $car_available_img = get_post_meta($post->ID, 'car_available_img', $single = true); ?>
            ?php if ($car_available_img != "") { echo $car_available_img; } ?>
        </div>  
        <div class="fullProduct">
            <?php $win_number = get_post_meta($post->ID, 'win_number', $single = true); ?>
            <?php if ($win_number != "") { echo 'VIN '.$win_number; } ?>
        </div>
</td>

Добавлено через 28 секунд

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

А не получится ли тогда что при клике на область 1 откроется полное описание всех продуктов сразу?

А ты попробуй увидишь.

Добавлено через 3 минуты
Здесь немного наврал в том посте

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

@Maksimus1991 · 18.04.2014, 20:40 **[ТС]**

Попробовал, не работает. Но думаю косяк мой.

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
53
54
<div id="teaserProduct">
<table>
    <tr>
        <td rowspan="3">
        <div> 
            <?php $car_available_img = get_post_meta($post->ID, 'car_available_img', $single = true); ?>
            ?php if ($car_available_img != "") { echo $car_available_img; } ?>
        </div>  
        <div>
            <?php $win_number = get_post_meta($post->ID, 'win_number', $single = true); ?>
            <?php if ($win_number != "") { echo 'VIN '.$win_number; } ?>
        </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> //teaserProduct
<div class="fullProduct">
<div id="<?php echo 'elem-'.$post->ID; ?>" class='expanded_search_visible gallery_no1'>
    <?php echo 'Тут наполнение области 2 будет' ?>
</div>
</div> // fullProduct

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

@Faust971 · 18.04.2014, 20:50

посмотри html структуру которую браузер выдает в исходном коде и скинь сюда.

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

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
                                                        <div id="teaserProduct">
    <table>
        <tr>
            <td rowspan="3">
                <div> 
                    <a href="http://localhost/Light_auto_wop/wp-content/uploads/2014/03/car_available_img.png"><img class="alignleft size-full wp-image-514" alt="car_available_img" src="http://localhost/Light_auto_wop/wp-content/uploads/2014/03/car_available_img.png" width="117" height="63" /></a>              </div>  
                <div>
                    <a>VIN A3B5C7D8</a>
                </div>
            </td>
            <td rowspan="3">
                lux
                                   </td>
            <td>
                  3,359                                                       Дизельный
                                  </td>
            <td rowspan="3">
                   1800000      
                                  </td>
            <td rowspan="3">
                    150000
                                  </td>
            <td rowspan="3">
                <a>Заказать автомобиль</a>
            </td>
        </tr>
        <tr>
                     <td>
                Автоматическая                                                            </td>
        </tr>
        <tr>
              <td>
                Полный                                    
                                    </td>
        </tr>
    </table>
</div>
<div id="elem-352" class='fullProduct elem-352'>
    elem-352                            
</div>  
<div id="teaserProduct">
    <table>
        <tr>
            <td rowspan="3">
                <div> 
                    <a href="http://localhost/Light_auto_wop/wp-content/uploads/2014/03/car_available_img.png"><img class="alignleft size-full wp-image-514" alt="car_available_img" src="http://localhost/Light_auto_wop/wp-content/uploads/2014/03/car_available_img.png" width="117" height="63" /></a>              </div>  
                <div>
                    <a>VIN A3B5C7D8</a>
                </div>
            </td>
            <td rowspan="3">
                lux
                                   </td>
            <td>
                  3,359                                                       Дизельный
                                  </td>
            <td rowspan="3">
                   1800000      
                                  </td>
            <td rowspan="3">
                    150000
                                  </td>
            <td rowspan="3">
                <a>Заказать автомобиль</a>
            </td>
        </tr>
        <tr>
                     <td>
                Автоматическая                                                            </td>
        </tr>
        <tr>
              <td>
                Полный                                    
                                    </td>
        </tr>
    </table>
</div>
<div id="elem-355" class='fullProduct elem-355>
    elem-355                            
</div>

@Faust971 · 18.04.2014, 21:20

Структура другая не такая как я думал. Есть возможность повешать класс на <a> или на div её оборачивающий вот тут?

HTML5
1
2
3
<div> 
                <a href="http://localhost/Light_auto_wop/wp-content/uploads/2014/03/car_available_img.png"><img class="alignleft size-full wp-image-514" alt="car_available_img" src="http://localhost/Light_auto_wop/wp-content/uploads/2014/03/car_available_img.png" width="117" height="63" /></a>              
</div>

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

Да есть можно как одинаковые классы, так и уникальные с id поста.

@Faust971 · 18.04.2014, 21:35

одинаковые повесь на все <a> с картинками или на их обертку div
и здесь <div id="teaserProduct"> не id а тоже class

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

А fullProduct так и останется?

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@Maksimus1991 12 / 6 / 1 Регистрация: 17.01.2014 Сообщений: 135
	18.04.2014, 15:27 [ТС]
	А можно чуть поподробнее? Switch это имя элемента? 0

@Faust971 69 / 69 / 50 Регистрация: 25.03.2012 Сообщений: 241
	18.04.2014, 18:28
	switch это наименование привязываемых данных к элементу. 0

@Maksimus1991 12 / 6 / 1 Регистрация: 17.01.2014 Сообщений: 135
	18.04.2014, 18:53 [ТС]
	Помоги если можешь советом, я уже с этой проблемой не первый день бьюсь, отложил, а сейчас опять надобность возникла. В общем нужно, чтобы при клике на изображение машины снизу появлялся div (то еть идет смена класса с invisible на visible). Кликаем на изображение которое пометил 1 и появляется вся область 2 (div с всяким наполнением). 0

@Maksimus1991 12 / 6 / 1 Регистрация: 17.01.2014 Сообщений: 135
	18.04.2014, 18:56 [ТС]
	Изображение 0

@Faust971 69 / 69 / 50 Регистрация: 25.03.2012 Сообщений: 241
	18.04.2014, 19:07
	Html структуру этих областей выложи. 0

@Faust971 69 / 69 / 50 Регистрация: 25.03.2012 Сообщений: 241
	18.04.2014, 19:32
	Нужно чтобы на дивах висели классы какие нибудь. 0

@Maksimus1991 12 / 6 / 1 Регистрация: 17.01.2014 Сообщений: 135
	18.04.2014, 20:10 [ТС]
	То есть если я тебя правильно понял, каждая таблица (краткое описание товара) должна быть в div с одинаковым классом? А не получится ли тогда что при клике на область 1 откроется полное описание всех продуктов сразу? 0

@Faust971 69 / 69 / 50 Регистрация: 25.03.2012 Сообщений: 241
	18.04.2014, 20:50
	посмотри html структуру которую браузер выдает в исходном коде и скинь сюда. 0

@Maksimus1991 12 / 6 / 1 Регистрация: 17.01.2014 Сообщений: 135
	18.04.2014, 21:32 [ТС]
	Да есть можно как одинаковые классы, так и уникальные с id поста. 0

@Faust971 69 / 69 / 50 Регистрация: 25.03.2012 Сообщений: 241
	18.04.2014, 21:35
	одинаковые повесь на все <a> с картинками или на их обертку div и здесь <div id="teaserProduct"> не id а тоже class 0

@Maksimus1991 12 / 6 / 1 Регистрация: 17.01.2014 Сообщений: 135
	18.04.2014, 21:39 [ТС]
	А fullProduct так и останется? 0