Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Только один из трех элементов может быть активен (https://javascript.ru/forum/events/34991-tolko-odin-iz-trekh-ehlementov-mozhet-byt-aktiven.html)

Volchen0ck 27.01.2013 14:22

Только один из трех элементов может быть активен
 
добрый день!
Ситуация следующая: есть три элемента "Text" и три картинки. Картинки все распологаются в одном месте. При клике на Text1 отображается картинка 1, при клике на Text2 - картинка 2 и на Text3 - картинка три соответственно. При клике на Text - текст меняет цвет с черного на красный.

Задача: Только один текст и соответствующая ему картинка могут быть активны, Т.е. сначала нажали на текст1 - тест изменил цвет на красный, появилась картинка 1. Нажимаем на текст2 - он подсвечивается красным и появляется картинка 2, при этом картинка 1 пропадает и текст1 становится черным ("не активный"). С трейтим текстом и картинкой такая же история. Т.е. только один текст из трех может быть активен и при этом отображается картинка, которая соответствует тексту.
В аттаче - пример, подскажите, что нужно добавить, что бы текст и картинка были активны только те, которые выбраны, а остальные были неактивны (значения обнулялись).
Спасибо большое за помощь!:)

danik.js 27.01.2013 14:51

Запостите код здесь, обрамив в [НTML] .. [/html] тег. Или в песочнице http://learn.javascript.ru/play или на jsfiddle.net .

Volchen0ck 27.01.2013 15:05

http://learn.javascript.ru/play/MpAfSb

Volchen0ck 27.01.2013 16:10

Для каждого Text следующая ф-ция:
(function(symbolName){Symbol.bindElementAction(com pId,symbolName,"${_Text1}","click",function(sym,e) {sym.$("Text1").css('color','#ff0000');sym.$("Koal a").css('opacity',1);});

т.е. при клике на текст элемент меняет цвет и опасити для картинки менятся с 0 на 1.

Для того, чтобы только один был элемент активный - для каждого текст я могу прописать дополнительно:
(function(symbolName){Symbol.bindElementAction(com pId,symbolName,"${_Text1}","click",function(sym,e) {sym.$("Text3").css('color','#000000');sym.$("Img3 ").css('opacity',0);});

но минус в том, что если на странице много элементов, например, 10 - то код становитс грамоздким. Можно ли написать JS чтобы он автоматически обнулял значения для остальных элементов?

Deff 27.01.2013 16:38

Volchen0ck,
По клику к текущему элементу добавляете класс "active"
Клик функция такого вида
$("elem:not(.active)").on('click',function() {
  $("elem").removeClass('active')....  //тут убираем свойства активности у Всех;
  $(this).addClass('active').... .//тут добавляем свойство активности у текущего
  // Тут Доп. функции, если есть
});

Пример
$("elem:not(.active)").on('click',function() {
  $("elem").removeClass('active').hide();
  $(this).addClass('active').show(1000)
});

Volchen0ck 27.01.2013 17:05

Спасибо большое за помощь! :)


Часовой пояс GMT +3, время: 02:45.