Изменение цвета без перезагрузки страницы

@andyyy · Регистрация: 26.05.2016

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

Всем привет как изменить цвет на jquery
<input type color>
Тоесть пользователь наводит на пипетку
и сразу блок с div меняется

HTML5
1
<div  class='square'>Здесь распологается квадрат, который должен менять цвет в зависимости от выбранного</div>

Добавлено через 15 часов 54 минуты
Что, никто не знает? Хотя бы как на чистом js или jq получить значение выбранного цвета
<INPUT TYPE=color>

@Antiplayer · 11.07.2017, 11:43

Нужно что-то наподобие?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
    <script>
        function setColor(color) {
            document.querySelector(".square").style.backgroundColor = color.value;
        }
 
    </script>
</head>
 
<body>
<div  class='square'>Здесь распологается квадрат, который должен менять цвет в зависимости от выбранного</div>
<input type="color" name="bg" value="#ff0000" onchange="setColor(this)">
</body>

https://jsfiddle.net/4poj71za/1/

@andyyy · 11.07.2017, 11:51 **[ТС]**

даааа)) Спасибо бро! А как еще это сохранять в Cookie, когда страница перезагружается?

Добавлено через 2 минуты
и плиз обьясните еще для самообучения
здесь можно по id?
<input type="color" id="bg" value="#ff0000" onchange="setColor(this)">

JavaScript
1
style.backgroundColor = bg.value;

2. для чего setColor(this) - this cтавится?

@Antiplayer · 11.07.2017, 12:01

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

А как еще это сохранять в Cookie, когда страница перезагружается?

с куками не работал, не знаю, но я думаю нагуглить не сложно.

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

для чего setColor(this) - this cтавится?

this это объект, который передаем в фукнцию, в нашем случае это инпут с цветом. Действие onchange заставляет выполниться функцию setColor после выбора цвета.

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

здесь можно по id?

Можно, но какой смысл? У нас есть this.

@andyyy · 11.07.2017, 12:11 **[ТС]**

а я еще пытаюсь просто через js что не правильно

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
head>
    <script>
        function setColor() {
            var sq = document.getElementById("square");
            var bg = document.getElementById("bg");
           sq.style.backgroundColor = bg.value;
        }
 
    </script>
</head>
 
<body>
<div  class='square'>hello</div>
<input type="color" name="bg" id='bg' value="#ff0000" onchange="setColor()">
</body>

Добавлено через 1 минуту

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

this это объект, который передаем в фукнцию, в нашем случае это инпут с цветом. Действие onchange заставляет выполниться функцию setColor после выбора цвета.

аа, если к примеру два инпута будет или 10 ?

@sad67man · 11.07.2017, 13:02

andyyy,

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

аа, если к примеру два инпута будет или 10 ?

К примеру можно связать по id

HTML5
1
2
3
4
5
<div  class='square' id="color-1" style='background-color: #ff0000'></div>
<input type="color"  class="input-color" data-id="color-1" value="#ff0000">
 
<div  class='square' id='color-2' style='background-color: #ff0000'></div>
<input type="color" class="input-color" data-id="color-2" value="#ff0000">

JavaScript
1
2
3
4
5
6
7
8
$(document).ready(){
  $('.input-color').on('change', function(){
    var $this = $(this)
    var id = $this.data('id');
    $('#'+id).css('background-color', $this.val());
    $.cookie(id, $this.val());
  });
}

Для работы с куками здесь используется плагин jQuery Cookie

https://jsfiddle.net/4poj71za/3/

@andyyy · 11.07.2017, 15:16 **[ТС]**

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

К примеру можно связать по id

Cпасибо, не я в том смысле this подставляет первый элемент html я так понял(текущий)?
а если бцудет много инпутов, то this не пойдет же?

Добавлено через 2 часа 9 минут
Блин не могу что-то сохранить в кукие, я просто в js не работаю, не могу понять логику, помогите плиз!
Чтобы сохранялось значение при перезагрузке

@Antiplayer · 11.07.2017, 16:03

andyyy, this это конкретный элемент на котором пользователь кликнул и выбрал цвет. Хоть их 200 будет, хоть 10000

@andyyy · 12.07.2017, 12:32 **[ТС]**

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

andyyy, this это конкретный элемент на котором пользователь кликнул и выбрал цвет. Хоть их 200 будет, хоть 10000

ага ве понял!

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

К примеру можно связать по id

ваш пример что-то не срабатывает. jq подключил но даже цвет не меняет, Или плагин тоже нувжно подключать?
А нет простенького решения с примером AntiPlayer

var $this = $(this)
первй раз такое вижу))
а зачем скобки?

@sad67man · 12.07.2017, 23:26

andyyy, Если вы используете метод $.cookie();, то плагин jquery-cookie должен быть подключен, иначе будет ошибка, первым делом всегда смотрите в консоль на наличие ошибок.

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

var $this = $(this)
первй раз такое вижу))
а зачем скобки?

Вы же вопрос в теме по jquery задали. Так вот это обычная функция jquery(), которая создает и возвращает jquery объект. И чтоб его каждый раз не создавать заново, я кладу его в переменную. Все переменные, которые содержат jquery объект принято называть начиная с символа $.

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. 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. Программа предоставляет более. . .

@Antiplayer 129 / 112 / 39 Регистрация: 27.09.2012 Сообщений: 305
	11.07.2017, 16:03
	andyyy, this это конкретный элемент на котором пользователь кликнул и выбрал цвет. Хоть их 200 будет, хоть 10000 0

Изменение цвета без перезагрузки страницы

Решение