Помогите оптимизировать код, он выполняет функционал показа/сокрытия дополнительной подписи к кнопке BUTTON. Подпись к кнопкам, при открытии страницы в браузере, отсутствует и появляется при фокусе (нажатии) на одну из кнопок, - на левую кнопку показывается подпись для левой кнопки при этом, если правая кнопка была ранее в фокусе, подпись прячется для правой кнопки, и наоборот.
Мне кажется, что это можно привести в более изящный вид, ведь я в этом не специалист, пока, и логику слепил по примерам :)
Роли исполняют:
button[id=left] — левая кнопка
button[id=right] — правая кнопка
span[id=left] — подпись левой кнопки
span[id=right] — подпись правой кнопки
JQuery-код
<script>
$(document).ready(function(){
// при открытии страницы прячем подпись для всех кнопок
$("span[id=left]").hide();
$("span[id=right]").hide();
// скрываем подпись если кнопка теряет фокус
$("button").blur(function(){
$("span[id=left]").hide();
$("span[id=right]").hide();
});
// если левая кнопка получила фокус, то выводим для нее подпись и прячем подпись для другой кнопки (#right)
$("button[id=left]").focus(function(){
$("span[id=left]").show();
$("span[id=right]").hide();
});
// если правая кнопка получила фокус, то выводим для нее подпись и прячем подпись для другой кнопки (#left)
$("button[id=right]").focus(function(){
$("span[id=right]").show();
$("span[id=left]").hide();
});
});
</script>
HTML-код
<div class="button">
<span id="left" style="position: relative; top: 16px; right: 30px;" class="descr">Описание для левой кнопки</span>
<button id="left" class="button">Левая кнопка</button>
</div>
<div class="button">
<button id="right" class="button">Правая кнопка</button>
<span id="right" style="position: relative; top: 16px; left: 30px;" class="descr">Описание для правой кнопки</span>
</div>