Уменьшить размер скрипта
Доброго времени суток не подскажите как уменьшить размер скрипта а то еще добавить надо десять блоков и тогда скрипт будет огромным
вот сам скрипт
function toggle(switchElement) {
var avto = document.getElementById('avto');
var moto = document.getElementById('moto');
var shlemi = document.getElementById('shlemi');
var furgon_do = document.getElementById('furgon_do');
var gruz_sv = document.getElementById('gruz_sv');
if (switchElement.value == 'avto') {
avto.style.display = '';
moto.style.display = 'none';
shlemi.style.display = 'none';
furgon_do.style.display = 'none';
gruz_sv.style.display = 'none';
}
else if (switchElement.value == 'moto') {
avto.style.display = 'none';
shlemi.style.display = 'none';
furgon_do.style.display = 'none';
moto.style.display = '';
gruz_sv.style.display = 'none';
}
else if (switchElement.value == 'shlemi') {
avto.style.display = 'none';
shlemi.style.display = '';
moto.style.display = 'none';
furgon_do.style.display = 'none';
gruz_sv.style.display = 'none';
}
else if (switchElement.value == 'furgon_do') {
avto.style.display = 'none';
shlemi.style.display = 'none';
moto.style.display = 'none';
furgon_do.style.display = '';
gruz_sv.style.display = 'none';
}
else if (switchElement.value == 'gruz_sv') {
avto.style.display = 'none';
shlemi.style.display = 'none';
moto.style.display = 'none';
furgon_do.style.display = 'none';
gruz_sv.style.display = '';
}
else if (switchElement.value != 'moto' && switchElement.value != 'avto') {
avto.style.display = 'none';
moto.style.display = 'none';
}
}
вот html <select name="select_left" size="1" id="select_left_id" onChange="toggle(this);"> <option selected="selected" value="avto" onClick="toggle(this);">Автомобили</option> <option value="moto" onClick="toggle(this);">Мотоциклы</option> <option value="shlemi" onClick="toggle(this);">Одежда шлемы</option> <option value="furgon_do" onClick="toggle(this);">Фургоны, грузовые автомобили до 7,5т</option> <option value="gruz_sv" onClick="toggle(this);">Грузовые автомобили свыше 7,5т</option> </select> <div id="avto" style="display: block;">...</div> <div id="moto" style="display: none;">...</div> . . . . . |
Объяви изначально при вызове функции все *.style.display в none:
avto.style.display = 'none'; moto.style.display = 'none'; shlemi.style.display = 'none'; furgon_do.style.display = 'none'; gruz_sv.style.display = 'none'; А дальше при else/if изменяй на '' только одно нужное тебе значение. |
<select name="select_left" size="1" id="select_left_id">
<option selected="selected" value="avto">Автомобили</option>
<option value="moto">Мотоциклы</option>
<option value="shlemi">Одежда шлемы</option>
<option value="furgon_do">Фургоны, грузовые автомобили до 7,5т</option>
<option value="gruz_sv">Грузовые автомобили свыше 7,5т</option>
</select>
<script>
(function(){
var select = document.getElementById('select_left_id');
select.onchange = function(){
for (var i = 0, option; option = select[i]; i++) {
var block = document.getElementById(option.value);
block.style.display = option.selected ? 'block' : 'none';
}
}
})();
</script>
<div id="avto" style="display: block;">avto</div>
<div id="moto" style="display: none;">moto</div>
<div id="shlemi" style="display: none;">shlemi</div>
<div id="furgon_do" style="display: none;">furgon_do</div>
<div id="gruz_sv" style="display: none;">gruz_sv</div>
|
function toggle(val) {
var elemId =['avto','moto','shlemi','furgon_do','gruz_sv'];
function setToddle(a) {
for(var i=0;i<elemId.length;i++) {
var tmp=(!+a[i]) ? 'none':'';
document.getElementById(elemId[i]).style.display=tmp;
}
}
var obj = {
avto: '10000',
moto: '01000',
shlemi: '00100',
furgon_do: '00010',
gruz_sv: '00001',
esly_else: '00'
}
for(var key in obj) {
if(val==key) {
var setArray = obj[key].split('');setToddle(setArray);return;
}
}
var setArray = obj.esly_else.split('');setToddle(setArray);//если соответствует 'else'
}
|
Оу, даже с элементами криптографии ) Круто, че )
|
nurik2120,
Вариант ...
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<select name="select_left" size="1" id="select_left_id">
<option selected="selected" value="avto">Автомобили</option>
<option value="moto">Мотоциклы</option>
<option value="shlemi">Одежда шлемы</option>
<option value="furgon_do">Фургоны, грузовые автомобили до 7,5т</option>
<option value="gruz_sv">Грузовые автомобили свыше 7,5т</option>
</select>
<div id="avto" style="display: block;">avto</div>
<div id="moto" style="display: none;">moto</div>
<div id="shlemi" style="display: none;">shlemi</div>
<div id="furgon_do" style="display: none;">furgon_do</div>
<div id="gruz_sv" style="display: none;">gruz_sv</div>
<script>
(function () {
var c = document.getElementById("select_left_id"),
a = document.getElementById("avto");
c.onchange = function () {
var b = document.getElementById(this.value);
b.style.display = "block";
a.style.display = "none";
a = b
}
})();
</script>
</body>
</html>
|
var setElem =[avto,shlemi,furgon_do.,moto,gruz_sv]
оказалось тут точка лишняя )) а так всем спасибо хотелось бы узнать как добавить тут еще один пункт 11 avto:'10000', 12 moto:'00010', 13 shlemi:'01000', 14 furgon_do:'00010', 15 gruz_sv:'00001 |
столько вариантов аж глаза разбегаются))
|
У рони самый простой и быстрый вариант. Можно еще отвязаться от id-шника auto через c.value
|
Цитата:
в obj - число знаков 00000 - соответствует колву элементов в elemId 1 - у которого .style.display = ''; |
| Часовой пояс GMT +3, время: 02:57. |