Показать сообщение отдельно
  #1 (permalink)  
Старый 26.02.2014, 22:21
Новичок на форуме
Отправить личное сообщение для megasan84 Посмотреть профиль Найти все сообщения от megasan84
 
Регистрация: 26.02.2014
Сообщений: 2

Поменять картинку у одной из img, а потом при нажатии на другой img, вернуть обратно.
Простите заранее, если это элементарно, но я искать устал, у самого уже мысли кончились...

Есть картинки:
<img id="badroad" class="notActive" onclick="func(this);" src="/d/718661/t/images/buttons/badroad_btn_1.jpg">
 <img id="badrails" class="notActive" onclick="func(this);" src="/d/718661/t/images/buttons/badrails_btn_1.jpg">
 <img id="baddvor" class="notActive" onclick="func(this);" src="/d/718661/t/images/buttons/baddvor_btn_1.jpg">


Нужно сделать, чтобы при клике на одну из них, менялось изображение на *_btn_2.jpg
А при клике на другую, у первой снова значение возвращалось на *_btn_1.jpg

Вот код:

<script type="text/javascript">
 function func(arg){

   var attr = arg.id;
   
   if (attr=='badroad') {
    $(arg).removeClass('notActive').addClass('active').attr('src', '/d/718661/t/images/buttons/' + attr + '_btn_2.jpg');
    $('#badrails').removeClass('active').addClass('notActive').attr('src', '/d/718661/t/images/buttons/badrails_btn_1.jpg');
    $('#baddvor').removeClass('active').addClass('notActive').attr('src', '/d/718661/t/images/buttons/baddvor_btn_1.jpg');
   }

     if (attr=='badrails') {
    $(arg).removeClass('notActive').addClass('active').attr('src', '/d/718661/t/images/buttons/' + attr + '_btn_2.jpg');
    $('#badroad').removeClass('active').addClass('notActive').attr('src', '/d/718661/t/images/buttons/badroad_btn_1.jpg');
    $('#baddvor').removeClass('active').addClass('notActive').attr('src', '/d/718661/t/images/buttons/baddvor_btn_1.jpg');
     }

       if (attr=='baddvor') {
    $(arg).removeClass('notActive').addClass('active').attr('src', '/d/718661/t/images/buttons/' + attr + '_btn_2.jpg');
    $('#badrails').removeClass('active').addClass('notActive').attr('src', '/d/718661/t/images/buttons/badrails_btn_1.jpg');
    $('#badroad').removeClass('active').addClass('notActive').attr('src', '/d/718661/t/images/buttons/badroad_btn_1.jpg');
       }
   
    return false;
  }
</script>


Здесь тупой if, если кнопок много, то становится тяжело перебирать все значения, да и код становится громоздким
Кто-нибудь подскажет, как это сделать в цикле и улучшить код?

Спасибо!
Ответить с цитированием