упрощение, группировка элементов по id
Здравствуйте.
Совсем недавно начал изучать javascript. И столкнулся с проблемой, надеюсь на помощь мастеров. s.hide1 = function () { id("text2").style.visibility = "hidden"; id("text3").style.visibility = "hidden"; id("text4").style.visibility = "hidden"; id("text5").style.visibility = "hidden"; id("text6").style.visibility = "hidden"; id("text7").style.visibility = "hidden"; } Как такой код можно облегчить? Я попытался следующим образом, но не заработало. s.hide1 = function () { id("text2"+"text3"+"text4"+"text5"+"text6"+"text7").style.visibility = "hidden"; } Очень прошу вашей помощи :( |
В css есть такая замечательная вещь, как классы. Используйте их.
Да и вообще, указание стиля через js не есть труЪ. Все-таки, разделение кода и отображения. |
Цитата:
|
Ох уж эта практика без теории…
<style type="text/css"> .magic-input {visibility: hidden} .toggler-1 .state-1, .toggler-2 .state-2, .toggler-3 .state-3 { visibility: visible; } </style> <form id="container" class="toggler-1"> <div> <input name="foo1" class="magic-input state-1" /> <input name="foo2" class="magic-input state-2" /> <input name="foo3" class="magic-input state-3" /> </div> <div> <input name="foo265" class="magic-input state-3" /> <input name="foo42" class="magic-input state-1" /> <input name="foo666" class="magic-input state-2" /> </div> <div> <input name="foo7" class="magic-input state-2" /> <input name="fooNaN" class="magic-input state-3" /> <input name="foo13" class="magic-input state-1" /> </div> <div> <input type="button" value="Roll!" onclick="stateChange(); return false"/> </div> </form> <script type="text/javascript"> function stateChange(){ if (!arguments.callee.state) arguments.callee.state = 1; arguments.callee.state = arguments.callee.state%3 + 1; document.getElementById('container').className = "toggler-" + arguments.callee.state; } </script> |
Спасибо большое, но это решение пока слишком сложное для меня.
Пока ещё не совсем понимаю, что происходит при нажатии кнопки. |
Nemezis,
Сначала задается правило: все элементы с классом magic-input не отображать. Следом за ним, с бóльшим приоритетом: все элементы с классом state-1 внутри элемента с классом toggler-1, state-2 внутри toggler-2 и state-3 внутри toggler-3 показываются. А дальше скрипт при нажатии на кнопку меняет последовательно у обвертки класс: toggler-1—toggler-2—toggler-3. Таким образом, получается, что блок может быть в одном из трех взаимоисключающих состояниях, и при этом каждый элемент внутри него «знает», что делать при каждом из них. Немного сумбурно объясняю, но, надеюсь, для общего понимания хватит. :) |
Часовой пояс GMT +3, время: 23:15. |