Простите заранее, если это элементарно, но я искать устал, у самого уже мысли кончились...
Есть картинки:
<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, если кнопок много, то становится тяжело перебирать все значения, да и код становится громоздким
Кто-нибудь подскажет, как это сделать в цикле и улучшить код?
Спасибо!