Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.56/9: Рейтинг темы: голосов - 9, средняя оценка - 4.56
10 / 18 / 4
Регистрация: 10.11.2017
Сообщений: 283
1

Переключение цвета при клике

18.02.2018, 19:03. Показов 1775. Ответов 6
Метки нет (Все метки)

Правильно ли я сделал переключение цвета? Может можно упростить?

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function() {
            var color = 1;
            $('.btn').on('click', function() {
                color++;
                if (color == 3) {
                    color = 1;
                }
                if (color == 1) {
                    $('.btn').css('background-color', 'green');
                }
                if (color == 2) {
                    $('.btn').css('background-color', 'red');
                }
            });
        });
HTML5
1
2
3
<div class="content">
        <div class="btn"></div>
    </div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
* {
    margin: 0;
    padding: 0;
}
 
html,
body,
.content {
    min-height: 100%;
}
 
.btn {
    margin: 0 auto;
    width: 100px;
    height: 100px;
    background-color: green;
    transition: background-color .2s ease-in-out;
}
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
18.02.2018, 19:03
Ответы с готовыми решениями:

Изменение цвета при клике на чекбокс
доброго времени суток всем! такая ситуация: на странице список с таблицами и в каждой форма с...

Изменение цвета при клике и обратно
подскажите простенький код. пробую $(&quot;.wpfp-link&quot;).on(&quot;click&quot;, function() {...

При первом клике одно действие, при втором клике другое действие
Есть кнопка, при первом нажатии добавляется файл-css на страницу (как это сделать знаю, как пример...

Сделать, чтобы при клике на кнопке, блок #cont исчез, а при повторном клике блок #cont появился
Как сделать, чтобы при клике на кнопке, блок #cont исчез, а при повторном клике блок #cont...

6
706 / 308 / 191
Регистрация: 05.03.2015
Сообщений: 822
18.02.2018, 21:30 2
Можно малость упростить
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() {
            var color = 1;
            $('.btn').on('click', function() {
                if (color === 1) {
                    $('.btn').css('background-color', 'green');
                    color++;
                } else if (color === 2) {
                    $('.btn').css('background-color', 'red');
                    color = 1;
                }
            });
        });
0
10 / 18 / 4
Регистрация: 10.11.2017
Сообщений: 283
18.02.2018, 23:24  [ТС] 3
Спасибо!
0
the hardway first
Эксперт JS
2259 / 1686 / 842
Регистрация: 05.06.2015
Сообщений: 3,426
20.02.2018, 09:45 4
Лучший ответ Сообщение было отмечено Богдан всепытный как решение

Решение

Можно ещё гибче делать
Javascript
1
2
3
4
5
6
7
8
var colors = ['green', 'red', 'blue', 'yellow', 'pink'],
  count = 1;
 
$(document).ready(function() {
  $('.btn').on('click', function() {
    $('.btn').css('background-color', colors[count++ % colors.length]);
  });
});
3
10 / 18 / 4
Регистрация: 10.11.2017
Сообщений: 283
20.02.2018, 14:52  [ТС] 5
j2FunOnly, count++ % colors.length что это?
0
the hardway first
Эксперт JS
2259 / 1686 / 842
Регистрация: 05.06.2015
Сообщений: 3,426
20.02.2018, 15:26 6
Цитата Сообщение от Богдан Хакер Посмотреть сообщение
что это?
Остаток от деления.
Так наверно читабельнее будет:
Javascript
1
2
3
4
5
6
7
8
9
10
11
var colors = ['green', 'red', 'blue', 'yellow', 'pink'],
  count = 1;
 
$(document).ready(function() {
  $('.btn').on('click', function() {
    var index = count % colors.length;
    console.log(count, index);
    $('.btn').css('background-color', colors[index]);
    count += 1;
  });
});
1
10 / 18 / 4
Регистрация: 10.11.2017
Сообщений: 283
20.02.2018, 15:42  [ТС] 7
j2FunOnly, правильнее сделать count = 0. Спасибо за помощь!
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
20.02.2018, 15:42

Нужно, чтобы при клике на #button фокусировался #one, при втором клике на #button фокусировался #two
$(function() { $(&quot;#button&quot;).click(function(){ $(&quot;#one&quot;).focus(); }); Это скрипт для #one, а как...

Переключение активности кнопки при клике
Народ как организовать или где пример уже есть На сайте две кнопки, по умолчанию одна из них...

Определение цвета элемента в canvas при клике
Возникла проблема с получением нужного цвета. В canvas нарисовала две фигуры. Необходимо при...

Переключение вкладок в tabcontrol при клике на элемент внутри tabitem
Есть tabcontrol и в каждом tabitem имеется textbox и colorpicker, если ткнуть в colorpicker, то...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru