Как сменить фоновое изображение элемента при нажатии на button через JS

@CyberPaladin · Регистрация: 27.05.2017

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

Коллеги, обращаюсь к вам с конкретной проблемой: необходимо чтобы при клике по button, на странице каждый раз менялось значение в текстовом поле и фоновое изображение в div с классом .animation-1(прописаное в css), причем изображение в формате PNG сменяеться GIF-кой и наоборот.
Первое я успешно сделал, но со сменить изображение скриптом не смог. Прошу помощи!
Вот скрипт:

JavaScript
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
$(document).ready(function() {
    $(".minus-button").on("click", function(e) { //обробник події кліку для кнопки .minus-button
        e.preventDefault();
        var $this = $(this);
        var $input = $this.closest("div.quantity-1").find("input[name='number']");
        var value = parseInt($input.val());
        if (value > -30) {
            value = value - 10;
        } else {
            value = -30;
            }
        $input.val(value);
    });
 
    $(".plus-button").on("click", function(e) { //обробник події кліку для кнопки .plus-button
        e.preventDefault();
        var $this = $(this);
        var $input = $this.closest("div.quantity-1").find("input[name='number']");
        var value = parseInt($input.val());
        if (value < 30) {
            value = value + 10;
        } else {
            value = 30;
        }
        $input.val(value);
    });
});

Я просто не понимаю как правильно написать новую функцию

не говоря уже о том чтобы улучшить старое.
Прошу помогите написать скрипт, коллеги

Вот так выглядит оформление на странице:

HTML5
1
2
3
4
5
6
7
<div class="quantity-1">
                <input type="button" value="+" name="button2" class="plus-button">
                <input type="text" name="number" value="0" class="number">
        <input type="button" value="-" name="button1" class="minus-button">
        <p class="subtitle"><b>U,B</b></p>
</div>
<div class="animation-1"><!--empty zone--></div>

Так я добавлял фоновое изображение на страницу:

CSS
1
2
3
.animation-1 {
  background: url(../img/physicschema1.png) no-repeat #317199 center;
}

@CyberPaladin · 05.06.2019, 23:50 **[ТС]**

Вот так выглядит этот проблемный момент у меня в браузерах:

@Уф · 06.06.2019, 13:23

пропиши все в два класса и меняй у этого дива классы функцией toggleClass

@CyberPaladin · 06.06.2019, 15:07 **[ТС]**

Уф, интересно. А можете показать как это в коде будет выглядеть, а то не очевидно как-то.

@Уф · 06.06.2019, 15:13

CSS
1
2
3
4
5
6
.animation-1 {
  background: url(../img/physicschema1.png) no-repeat #317199 center;
}
.animation-2 {
  background: url(../img/physicschema2.png) no-repeat #317199 center;
}

добавь один класс который не будет меняться, для выборки

HTML5
1
<div class="anim animation-1"><!--empty zone--></div>

JavaScript
1
$('div.anim').toggleClass('animation-1 animation-2');

@CyberPaladin · 06.06.2019, 16:24 **[ТС]**

Уф, да теперь все работает, но код получился очень громоздким - нужно каждый раз писать 2 новых условных оператора(по одному для plus-button и minus-button), я уже молчу про css файл, куда нужно добавлять для каждой картинки свой класс, а и нужно 6 штук

Так можна ли из решения написать новую функцию для переключателей, чтобы не спамить if-ами??

JavaScript
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
$(document).ready(function() {
    $(".minus-button").on("click", function(e) { //обробник події кліку для кнопки .minus-button
        e.preventDefault();
        var $this = $(this);
        var $input = $this.closest("div.quantity-1").find("input[name='number']");
        var value = parseInt($input.val());
        if (value > -30) {
            value = value - 10;
        } else {
            value = -30;
            }
        $input.val(value);
        if (value == 0) $('div.switch').toggleClass('newanim10 animation-1')
    });
 
    $(".plus-button").on("click", function(e) { //обробник події кліку для кнопки .plus-button
        e.preventDefault();
        var $this = $(this);
        var $input = $this.closest("div.quantity-1").find("input[name='number']");
        var value = parseInt($input.val());
        if (value < 30) {
            value = value + 10;
        } else {
            value = 30;
        }
        $input.val(value);
        if (value == 10) $('div.switch').toggleClass('animation-1 newanim10');
    });
});

Вот это было бы полноценным решением...

@Уф · 06.06.2019, 16:48

если картинки разные то от разных классов никуда не деться, функцию можно одну сделать, примерно такую (не проверял)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(document).ready(function() {
 
function btn_k(t,stop,togv,togc,add){
        var $input = t.closest("div.quantity-1").find("input[name='number']");
        var value = parseInt($input.val());
        if (-value*add > -stop*add) {
            value = value + 10*add;
        } else {
            value = stop;
        }
        $input.val(value);
        if (value == togv) $('div.switch').toggleClass(togc);
}
 
    $(".minus-button").on("click", function(e) { //обробник події кліку для кнопки .minus-button
        e.preventDefault();
        btn_k($(this),-30,0,'newanim10 animation-1',-1);
    });
 
    $(".plus-button").on("click", function(e) { //обробник події кліку для кнопки .plus-button
        e.preventDefault();
        btn_k($(this),30,10,'newanim10 animation-1',1);
    });
});

@CyberPaladin · 07.06.2019, 22:06 **[ТС]**

Уф, спасибо за предоставленное решение, немного с опозданием, хочу сообщить что функция переключения кнопки работает отлично, но никуда не исчезла проблема с переключением картинок - если снять комменты, то
всегда исполняеться только последняя вызываемая функция т.е. нажимаем на plus-button значение +30, а на minus-button - всегда -30 и тогда новая картинка не подходит по смыслу

ВОПРОС: как сделать чтобы при первом клике на plus-button(значение +10) вызывалась первая функция, при втором(+20) - вторая, а при третьем щелчке(+30) - третья, чтобы переключение происходило по порядку и так же и с minus-button?? У меня уже мозг вскипел просто...

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
$(".minus-button").on("click", function(e) { 
        e.preventDefault();
        btnClick($(this), -30, -10, 'newanim-10 animation-1', -1);
        /*btnClick($(this), -30, -20, 'newanim-20 animation-1', -2);
        btnClick($(this), -30, -30, 'newanim-30 animation-1', -3);*/
});
 
$(".plus-button").on("click", function(e) { 
        e.preventDefault();
        btnClick($(this), 30, 10, 'newanim10 animation-1', 1);
        /*btnClick($(this), 30, 20, 'newanim20 animation-1', 2);
        btnClick($(this), 30, 30, 'newanim30 animation-1', 3);*/

Новые блоги и статьи Все статьи Все блоги /
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .

@CyberPaladin 18 / 16 / 8 Регистрация: 27.05.2017 Сообщений: 118
	05.06.2019, 23:50 [ТС]
	Вот так выглядит этот проблемный момент у меня в браузерах: Миниатюры 0

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	06.06.2019, 13:23
	пропиши все в два класса и меняй у этого дива классы функцией toggleClass 0

@CyberPaladin 18 / 16 / 8 Регистрация: 27.05.2017 Сообщений: 118
	06.06.2019, 15:07 [ТС]
	Уф, интересно. А можете показать как это в коде будет выглядеть, а то не очевидно как-то. 0

Как сменить фоновое изображение элемента при нажатии на button через JS

Решение