Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Уменьшить размер скрипта (https://javascript.ru/forum/dom-window/36383-umenshit-razmer-skripta.html)

nurik2120 13.03.2013 17:17
Уменьшить размер скрипта
 
Доброго времени суток не подскажите как уменьшить размер скрипта а то еще добавить надо десять блоков и тогда скрипт будет огромным
вот сам скрипт
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>
. . . . .

Akalenik 13.03.2013 18:11
Объяви изначально при вызове функции все *.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 изменяй на '' только одно нужное тебе значение.

danik.js 13.03.2013 18:12 
<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>

Deff 13.03.2013 18:13 
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'

}

danik.js 13.03.2013 18:19
Оу, даже с элементами криптографии ) Круто, че )

рони 13.03.2013 18:36
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>

nurik2120 13.03.2013 18:36
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

nurik2120 13.03.2013 18:39
столько вариантов аж глаза разбегаются))

danik.js 13.03.2013 19:05
У рони самый простой и быстрый вариант. Можно еще отвязаться от id-шника auto через c.value

Deff 13.03.2013 19:07
Цитата:
Сообщение от nurik2120
хотелось бы узнать как добавить тут еще один пункт
Наверно в elemId и в obj
в obj - число знаков 00000 - соответствует колву элементов в elemId
1 - у которого .style.display = '';

Deff 13.03.2013 19:09
Зато я не привязывался к DOM - исходил из задачи правки чисто функции

Ко всему прочему - может скрывать и показывать элементы произвольно в зависимости от нужной комбинации( к примеру чекитов, или мультиселектов, (*востребовано для комбинационных, расширяемых пояснений, с много селектами

danik.js 13.03.2013 19:24
Цитата:
Сообщение от Deff
 var setArray = obj.else...
IE мозгов не хватит разобрать этот код )

Deff 13.03.2013 19:58
Цитата:
Сообщение от danik.js (Сообщение 240517)
IE мозгов не хватит)
Ти прав
Поправил:
<!DOCTYPE HTML>
<html>
<head>
  <title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script>
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'

}
</script>
</head>
<body>
<form>
<select name="select_left"  size="1" id="select_left_id" onChange="toggle(this.value);">
 <option value="avto" selected>Автомобили</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>
</form>

</body>
</html>

nurik2120 13.03.2013 20:42
ага спасибо

nurik2120 13.03.2013 20:48
а если допустим выпадающий список убрать и заменить его
ul
li id="avto"
li id moto
будет работать выше написаный скрипт?

Deff 13.03.2013 20:51
Цитата:
Сообщение от nurik2120
будет работать выше написаный скрипт?
Тады не будет передаваться
onChange="toggle(this.value);
нун писать 
ul
 li data="avto" onclick="toggle(this.getAttribute('data'))"
 li idata="moto


Или просто
ul
 li onclick="toggle('avto')"
 li onclick="toggle('moto')"

nurik2120 15.04.2013 16:09
у меня на странице два списка с блоками один в другом

<список></список>
<блок>
<список></список>
<блок></блок></блок>
и перестало работать js а создал все в точности как тут написано не подскажите в чем проблема?

Aetae 15.04.2013 16:51
Всё это гавно же.
Нормальные люди продумывают всё заранее и пишут соответтвующий css.
А потом просто навешивают класс show/hide(в зависимости от подхода).

nurik2120 15.04.2013 17:28
мда...


Часовой пояс GMT +3, время: 15:46.