Как оптимизировать JS-код?

Question

[Uber Noob]

Код рабочий https://jsfiddle.net/L9snqz1h/ но понятно что в нём есть избыточность и дублирование потому что всё указывается напрямую. Догадываюсь что как-то можно сделать через функцию что бы отображать то что выбрано а всё остальное нет.

Comments

[Иван Соломенников]

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

[Uber Noob]

Иван Соломенников: Интересно конечно, больше решений хороших и разных )

[Иван Соломенников]

ubernoob: Сейчас выложу, убрал "ступеньки" при выборе нового инпута.

Answer 1

[Immortal_pony]

Так, например.

Answer 2

[Иван Соломенников]

Мой вариант

Comments

[Uber Noob]

Спасибо, со ступеньками вы зря )) Эти div'ы в реальном проекте в разных местах будут расположены а не в одном )

[Иван Соломенников]

ubernoob: Задумка автора, понятно, тогда как вариант давать класс "диву" и задавать отступы через css в зависимости от value.

[Uber Noob]

Иван Соломенников: это без сомнения, так и сделаю в рабочем проекте, спасибо

Answer 3

[lega]

Вот ещё проще: jsfiddle.net/lega911/twreh95r

Comments

[Uber Noob]

Ваще чётко и без JS. А как с кроссбраузерностью у такого решения?

[lega]

ubernoob: там нужен Angular Light (18-23kb сжатый), работает с IE9+,
если нужен IE8 то нужно подключить jQuery, но зачастую jQuery уже везде есть, так что работает IE8+