упрощение, группировка элементов по 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, время: 01:50. |