Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
holland
0 / 0 / 2
Регистрация: 30.01.2017
Сообщений: 65
1

Почему не меняется фон у картинка при нажатие на radio

03.02.2017, 12:34. Просмотров 262. Ответов 4
Метки нет (Все метки)

Не получается реализовать код кроме цвета белого и черного. Они выходят нормально,но вот допустим крсный,синий и оранжевый никак не отображает фон
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<img id="imgageKonstr" src="http://futbolka/image/mujskaya_futbolka_constr.png">
    <div class="colorBox">
                        <div id="colorText">Цвет:</div>
                        <label for="color1" class="color-change-block" style="background-color: #fff;"></label>
                        <input type="radio" id="color1" class="radioColor" value="#ffffff" hidden>
                        <label for="color2" class="color-change-block" style="background-color: #d9534f;"></label>
                        <input type="radio" id="color2" class="radioColor" value="#d9534f;" hidden>
                        <label for="color3" class="color-change-block" style="background-color: #5cb85c;"></label>
                        <input type="radio" id="color3" class="radioColor" value="#5cb85c;" hidden>
                        <label for="color4" class="color-change-block" style="background-color: #f0ad4e;"></label>
                        <input type="radio" id="color4" class="radioColor" value="#f0ad4e;" hidden>
                        <label for="color5" class="color-change-block" style="background-color: #000;"></label>
                        <input type="radio" id="color5" class="radioColor" value="#000000" hidden>
                    </div>
Javascript
1
2
3
4
5
6
7
$(document).ready(function(){
$(".radioColor").click(function(){
                        if (this.checked) {
                            $("#imgageKonstr").css("background-color", this.value);
                        }
                    });
                });
Добавлено через 28 минут
Все нашел проблема в value="#000;" в ; надо просто убрать и все заработает
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
03.02.2017, 12:34
Ответы с готовыми решениями:

При наведении на ссылку меняется фон другого дива
Задача: При наведении на ссылки (id1;id2;id3) менять фон у родительского...

При нажатии на кнопку картинка прячется, и надпись на кнопке меняется на «покажи меня»
2.Сначала на странице две картинки в рамках и две кнопки с надписью «спрячь...

При клике на DIV меняется картинка другого DIV
Подскажите как это реализовать? Добавлено через 21 минуту Можно-ли решить...

Фон не меняется
&lt;? session_start(); header('Content-Type: text/html; charset=utf-8'); ?&gt;...

Не меняется фон по событию onMouseover
Вот код при наведении на объект синий должен стать красный и рамка должна стать...

4
sad67man
707 / 575 / 348
Регистрация: 23.08.2015
Сообщений: 1,441
03.02.2017, 13:00 2
holland, Вообще для radio нужно вешать события не на клик а на change
Для того, чтобы radio работали, их нужно сгруппировать по атрибуту name, т.е. он должен быть у всех одинаковый, иначе радиокнопки работают обособленно друг от друга, и все будут всегда выбраны.

Добавлено через 2 минуты
В таком случае и проверка this.checked не нужна. Вот собственно пример
https://jsfiddle.net/ybL627bh/2/
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<img id="imgageKonstr" src="http://kazantip-css.net/_ld/45/51118576.png">
<div class="colorBox">
  <div id="colorText">Цвет:</div>
  <label for="color1" class="color-change-block" style="background-color: #fff;"></label>
  <input type="radio" name='color' id="color1" class="radioColor" value="#ffffff" hidden>
  <label for="color2" class="color-change-block" style="background-color: #d9534f;"></label>
  <input type="radio" name='color' id="color2" class="radioColor" value="#d9534f" hidden>
  <label for="color3" class="color-change-block" style="background-color: #5cb85c;"></label>
  <input type="radio"  name='color' id="color3" class="radioColor" value="#5cb85c" hidden>
  <label for="color4" class="color-change-block" style="background-color: #f0ad4e;"></label>
  <input type="radio" name='color' id="color4" class="radioColor" value="#f0ad4e" hidden>
  <label for="color5" class="color-change-block" style="background-color: #000;"></label>
  <input type="radio" name='color' id="color5" class="radioColor" value="#000000" hidden>
</div>
Javascript
1
2
3
$('.radioColor').change(function() {
  $("#imgageKonstr").css("background-color", this.value);
});
0
holland
0 / 0 / 2
Регистрация: 30.01.2017
Сообщений: 65
03.02.2017, 13:05  [ТС] 3
Цитата Сообщение от sad67man Посмотреть сообщение
Вообще для radio нужно вешать события не на клик а на change
А в чем отличии этих вещей. Просто оба работают варианта
0
sad67man
707 / 575 / 348
Регистрация: 23.08.2015
Сообщений: 1,441
03.02.2017, 13:26 4
holland, Дело все-таки в сущности радиокнопок.
Отойдем от вашей задачи. 1) Из-за отсутствия атрибута name, радиокнопки не сгруппированы, вы не сможете средством js достать выбранное значение. И не сможете отправить данные через форму.
2)Событии change срабатывает только когда меняется значение, а не при каждом клике.
В данном случае видимой разницы может и не быть, тогда может возникнуть вопрос, зачем тут вообще радиокнопки? Можно же сделать просто какими-нибудь списком (ul li) или просто блоками. Значение положить в атрибут data-color и при клике его присваивать картинке или сразу можно доставать из заданного background-color. Какой смысл плодить кучу html кода, и не использовать радиокнопки по назначению?
0
holland
0 / 0 / 2
Регистрация: 30.01.2017
Сообщений: 65
03.02.2017, 14:16  [ТС] 5
я уже name поставил

Добавлено через 35 секунд
sad67man, то есть тут ты советуешь использовать dibv?
0
03.02.2017, 14:16
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
03.02.2017, 14:16

задний фон картинка
Всем привет! www.lizamakeeva.ru/news проблема - при просмотре разделов...

Почему можно выбрать все radio
&lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;form name=&quot;f1&quot;&gt; vopr?&lt;br&gt;&lt;br&gt; &lt;input...

Как сделать, чтобы при нажатии на radio менялась картинка?
как сделать чтобы при нажатии на radio менялось картинка на div ? ...


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru