Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Подключение плагина для радиобаттона, через .class 
:(
    Опции темы
Yamaradg
Дата 5.3.2012, 18:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 28
Регистрация: 25.12.2011

Репутация: нет
Всего: нет



Всем Привет.
Решил попробовать написать для себя скрипт по кастомизации радиобаттонов(с подключением через классы) и
столкнулся с непонимаем того, почему при клике на инпут начинает появлятся и сама картинка в теге:
<i class="myVirtualRadio">?
Такого по моим планам возникать не должно smile
(Тоесть:
в коде прописано что бы по клику на тег <i>
в нём менялась картинка.(с галочкой).
Но нигде ведь не указано, что бы это происходило по клику на инпут? )

Также хотелось бы понять как правильно организовать исчезание ’галочки’ при клике на другой радиобаттон?
Убирается почему 'галочка' то только с радио под названием 'шестой'? Остальные не реагируют...
(Буду признателен — если кто подскажет...)
(Пробовал перебирать(с помощюь цикла) тег <i>(c соответствующим классом) и в зависимости от условий менять у него картинку - но видно из виду всё таки я что то упускаю?...)
Js код выглядит следующим образом:
Код

var myClassRadio = document.getElementsByTagName('input');

var virtualClassRadio = document.getElementsByTagName('i');


for (i=0; i < virtualClassRadio.length; i++) {

if (virtualClassRadio[i].className=='myVirtualRadio') {

var virtualImg = virtualClassRadio[i];

virtualImg.onclick = function(){

this.style.backgroundImage='url(images/checked.png)';

}

}

};

for (i=0; i < myClassRadio.length; i++) {

if (myClassRadio[i].className=='classMyRadio') {

var classRadio = myClassRadio[i];

classRadio.onclick = function(){

if (this.checked == true) {

virtualImg.style.backgroundImage='url(images/checkoff.png)';

}

};

}

};

Скрин находится здесь:
http://yamaradg.narod2.ru/history/radio.jpg
Саму страницу можно увидеть здесь:
http://yamaradg.narod2.ru/history/moi_plagini/index.html
P.S. В JS я новичек и на данный момент хотелось бы получить не столько чей то готовый код— сколько разобратся в причинах неполадок своего.
Буду благодарен за любую помощь по данному вопросу...

Это сообщение отредактировал(а) Yamaradg - 5.3.2012, 18:15
PM MAIL   Вверх
Amphiluke
Дата 6.3.2012, 19:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 9
Всего: 112



Цитата(Yamaradg @  5.3.2012,  22:07 Найти цитируемый пост)
в коде прописано что бы по клику на тег <i>в нём менялась картинка.(с галочкой).Но нигде ведь не указано, что бы это происходило по клику на инпут?

Вам следует почитать о таком явлении как «всплытие» событий в JavaScript (event bubbling). Если кратко и упрощая, событие зарождается в объекте, который это событие провоцирует и далее последовательно поднимается (всплывает) по DOM-дереву, проходя все родительские элементы исходного элемента. Поэтому клик по дочернему элементу вызовет обработчики события клика в родительских (если всплытие события не подавить соответствующими методами объекта Event (это вам подсказка, раз готовый код не нужен)).

По второму вопросу: я бы сделал все не так. Принципиально… Впрочем, если вам прежде всего хочется разобраться в причинах неработоспособности своего кода, я не буду много расписывать. Кратко, как сделал бы я — завязаться на всё то же всплытие событий и завести лишь один-единственный обработчик события click — на контейнере, содержащем все радио-кнопки. И фоновую картинку менять не через свойство backgroundImage объекта style, а добавляя/убирая CSS класс, для которого background прописан нормально в таблице стилей.
PM   Вверх
Yamaradg
Дата 8.3.2012, 18:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 28
Регистрация: 25.12.2011

Репутация: нет
Всего: нет



Цитата(Amphiluke @ 6.3.2012,  19:47)
Цитата(Yamaradg @  5.3.2012,  22:07 Найти цитируемый пост)
в коде прописано что бы по клику на тег <i>в нём менялась картинка.(с галочкой).Но нигде ведь не указано, что бы это происходило по клику на инпут?

Вам следует почитать о таком явлении как «всплытие» событий в JavaScript (event bubbling). Если кратко и упрощая, событие зарождается в объекте, который это событие провоцирует и далее последовательно поднимается (всплывает) по DOM-дереву, проходя все родительские элементы исходного элемента. Поэтому клик по дочернему элементу вызовет обработчики события клика в родительских (если всплытие события не подавить соответствующими методами объекта Event (это вам подсказка, раз готовый код не нужен)).

По второму вопросу: я бы сделал все не так. Принципиально… Впрочем, если вам прежде всего хочется разобраться в причинах неработоспособности своего кода, я не буду много расписывать. Кратко, как сделал бы я — завязаться на всё то же всплытие событий и завести лишь один-единственный обработчик события click — на контейнере, содержащем все радио-кнопки. И фоновую картинку менять не через свойство backgroundImage объекта style, а добавляя/убирая CSS класс, для которого background прописан нормально в таблице стилей.

Большое Вам Спасибо!
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0549 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.