Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript » Как составить исключающее условие?

Страниц (1): [1]
 

1. ЧИМ - 04 Марта, 2019 - 12:30:30 - перейти к сообщению
Добрый день формучане!
Чёт не лезет в голову как обойти проблему не нагромождая её ненужными элементами.
Пытаюсь сделать что то вроде карточки, в которой по селекту выбирается пункт меню и исходя из него скрываются определённые строки из таблицы и показываются только нужные.
Вот код:
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. <script>
  3.         function type_obj(){
  4.             select=document.getElementById("select_obj");
  5.             sist=document.getElementsByClassName('sist');
  6.             print=document.getElementsByClassName('print');
  7.         switch(select.options[select.selectedIndex].text){
  8.             case 'Системный блок':                        
  9.                 var i;
  10.                 for (i = 0; i < sist.length; i++) {
  11.                 sist[i].hidden=false;
  12.                 }
  13.                 var j;
  14.                 for (j = 0; j < print.length; j++) {
  15.                 print[j].hidden=true;
  16.                 }
  17.             break;
  18.             case 'Принтер':
  19.             case 'МФУ':                        
  20.                 var i;
  21.                 for (i = 0; i < sist.length; i++) {
  22.                 sist[i].hidden=true;
  23.                 }
  24.                 var j;
  25.                 for (j = 0; j < print.length; j++) {
  26.                 print[j].hidden=false;
  27.                 }
  28.             break;
  29.            
  30.         }
  31.         }
  32.     </script>
  33.  
  34. <select id="select_obj" onchange="type_obj()"><optgroup><option disabled selected value>Выбирите значение</option><option>Принтер</option><option>МФУ</option><option>Системный блок</option></optgroup></select>
  35.  
  36. <table border="1">
  37.         <thead>
  38.             <tr>
  39.                 <th colspan="2">Заполните данные</th>                
  40.             </tr>
  41.         </thead>
  42.         <tbody>
  43.             <tr class="sist" hidden="">
  44.                 <td>CPU</td>
  45.                 <td></td>
  46.             </tr>
  47.             <tr class="sist" hidden="">
  48.                 <td>RAM</td>
  49.                 <td></td>
  50.             </tr>
  51.             <tr class="sist" hidden="">
  52.                 <td>Drive</td>
  53.                 <td></td>
  54.             </tr>
  55.             <tr class="sist" hidden="">
  56.                 <td>OS</td>
  57.                 <td></td>
  58.             </tr>
  59.             <tr class="print" hidden="">
  60.                 <td>Формат</td>
  61.                 <td></td>
  62.             </tr>
  63.             <tr class="print" hidden="">
  64.                 <td>Тип</td>
  65.                 <td><select><optgroup><option>Лазерный</option><option>Струйный</option></select></td>
  66.             </tr>
  67.             <tr class="print" hidden="">
  68.                 <td>Картридж</td>
  69.                 <td></td>
  70.             </tr>
  71.         </tbody>
  72.     </table>
  73.  


Получается что для того что бы расширить список например до 10-20 наименований, мне нужно будет в каждом кейсе скрывать все строки таблицы которые не соответствуют выбору, т.е. делать по циклу для каждого класса чтоб изменить атрибут hidden.
Существует ли более элегантное исполнение таких примеров?
2. Vladimir Kheifets - 04 Марта, 2019 - 18:39:39 - перейти к сообщению
ЧИМ пишет:
Добрый день формучане!
Чёт не лезет в голову как обойти проблему не нагромождая её ненужными элементами.
Пытаюсь сделать что то вроде карточки, в которой по селекту выбирается пункт меню и исходя из него скрываются определённые строки из таблицы и показываются только нужные.
Получается что для того что бы расширить список например до 10-20 наименований, мне нужно будет в каждом кейсе скрывать все строки таблицы которые не соответствуют выбору, т.е. делать по циклу для каждого класса чтоб изменить атрибут hidden.
Существует ли более элегантное исполнение таких примеров?

Добрый день!
Можно сделать так:
1. Вмето классов "print","sist" и.т.д. до 20 и более пишем классы "table_row_group1","table_row_group2", "table_row_group3" и.т.д.
2. Свойства определяем так:
CODE (html):
скопировать код в буфер обмена
  1.  tr[class^="table_row_group"] {
  2.     ................
  3.  }

3. определяем два класса:
CODE (html):
скопировать код в буфер обмена
  1. tr.on {display:table-row}
  2. tr.off {display:none}

4. Сам принцип развёртывания и свёртывания - ипользование мультиклассов в js.
Например, "table_row_group1 on" или "table_row_group1 off"
5. Для этого Вам нужно определить какой класс и как нужно модифицировать
CODE (javascript):
скопировать код в буфер обмена
  1.  select=document.getElementById("select_obj");  
  2.    i=select.selectedIndex;
  3.    clsssName="table_row_group"+i

и для него определить мультикласс "table_row_group1 on", а для остальных "table_row_group1 off"
6.Для реализации этой затеи Вам пригодятся несколько js-функций
Спойлер (Отобразить)
Удачи!
3. ЧИМ - 04 Марта, 2019 - 19:56:05 - перейти к сообщению
Спасибо за ответ. Попробую применить ваш код.

 

Powered by ExBB FM 1.0 RC1