Как избежать цикла в цикле?

294
17 июля 2021, 14:50

Разрабатываю, казалось бы, простую вещь, как электронное расписание пар. Цель: при выборе верхней/нижней недели - скрывать соответствующие пары. Проблема: если сначала выбрать верхнюю неделю, а затем нижнюю, то почти все пары скроются. Я понимаю, что при выборе нижней недели, парам с верхней нужно заново добавлять класс 'block', но следовательно необходимо заново циклом перебрать NodeList. Вопрос: как избежать подобной ситуации? Строки кода 13-16

let selectWeeks = document.querySelector('#week'); 
 
 
selectWeeks.onclick = () => { 
    let doubleSubject = document.querySelectorAll('.double-subj'); 
    let firstSubjects = document.querySelectorAll('.first-subj'); 
 
    if (selectWeeks.selectedIndex == 1) { 
        doubleSubject.forEach(element => { 
            element.style.display = 'none'; 
        }); 
    } 
    else if (selectWeeks.selectedIndex == 2) { 
        firstSubjects.forEach(element => { 
            element.style.display = 'none'; 
        }); 
    } 
};
.days { 
    padding: 10px; 
    text-align: center; 
} 
.time { 
    padding: 10px; 
} 
p { 
    display: inline; 
}
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Расписание Пинф 19</title> 
    <link rel="stylesheet" href="./css/style.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 
</head> 
<body> 
    <h1>Расписание</h1> 
    <p>Неделя:</p> 
    <select name="week" id="week"> 
        <option value="0">Выбери неделю</option> 
        <option value="1">Верхняя</option> 
        <option value="1">Нижняя</option> 
    </select> 
    <table class="table table-bordered"> 
        <tbody> 
            <thead class="thead-light"> 
        <tr> 
            <th class="days" colspan="2" >Понедельник</th> 
        </tr> 
        </thead> 
        <tr> 
            <th class="time table-warning">Время</th> 
            <th align="left" class="table-warning">Предметы</th> 
        </tr> 
     
        <tr> 
            <th class="table-info">08:30 - 10:00</th> 
            <td class="">Математическое и имитационное моделирование (практ.)</td> 
        </tr> 
        <tr> 
            <th class="table-info">10:15 - 11:45</th> 
            <td class="">Информационная безопасность (лекц.)</td> 
        </tr> 
        <tr> 
            <th rowspan="2" class="table-info">12:10 - 13:40</th> 
            <td class="first-subj">Теория вероятностей и математическая статистика (сем.) </td> 
        </tr> 
        <tr> 
            <td class="double-subj">Электронный бизнес на международном рынке товаров и услуг (лекц.)</td> 
        </tr> 
        <tr> 
            <th rowspan="2" class="table-info">13:55 - 15:25</th> 
            <td class="first-subj">Программная инженерия (практ.)</td> 
        </tr> 
        <tr> 
            <td class="double-subj">Теория вероятностей и математическая статистика (сем.)</td> 
        </tr> 
        <thead class="thead-light"> 
        <tr> 
            <th class="days" colspan="2">Вторник</th> 
        </tr> 
        </thead> 
        <tr> 
            <th rowspan="2" class="table-info">08:30 - 10:00</th> 
            <td class="first-subj">Системы поддержки принятия решений (практ.)</td> 
        </tr> 
        <tr> 
            <td class="double-subj">Программная инженерия (практ.)</td> 
        </tr> 
        <tr> 
            <th class="table-info">10:15 - 11:45</th> 
            <td>Теория вероятностей и математическая статистика (лекц.)</td> 
        </tr> 
         <tr> 
             <th rowspan="2" class="table-info">12:10 - 13:40</th> 
             <td class="first-subj">Электронный бизнес на международном рынке товаров и услуг</td> 
         </tr> 
         <tr> 
             <td class="double-subj">Математическое и имитационное моделирование (лекц.)</td> 
         </tr> 
         <tr> 
             <th rowspan="2" class="table-info">13:55 - 15:25</th> 
             <td class="first-subj">-  </td> 
         </tr> 
         <tr> 
             <td class="double-subj">Базы данных (практ.)</td> 
         </tr> 
        <thead class="thead-light"> 
         <tr> 
            <th class="days" colspan="2" >Среда</th> 
        </tr> 
        </thead> 
        <tr> 
            <th rowspan="2" class="table-info">08:30 - 10:00</th> 
            <td class="first-subj">Исследование операций и методы оптимизации (лекц.)</td> 
        </tr> 
        <tr> 
            <td class="double-subj">Информационная безопасность (практ.)</td> 
        </tr> 
        <tr> 
            <th rowspan="2" class="table-info">10:15 - 11:45</th> 
            <td class="first-subj">Программная инженерия (лекц.)</td> 
        </tr> 
        <tr> 
            <td class="double-subj">Проектирование информационных систем (практ.)</td> 
        </tr> 
        <tr> 
            <th rowspan="2" class="table-info">12:10 - 13:40</th> 
            <td class="first-subj">Экономика и организация предприятия (сем.)</td> 
        </tr> 
        <tr> 
            <td class="double-subj">Информационные системы и технологии (лекц.)</td> 
        </tr> 
        <thead class="thead-light"> 
        <tr> 
            <th class="days" colspan="2">Четверг</th> 
        </tr> 
        </thead> 
        <tr> 
            <th class="table-info">08:30 - 10:00</th> 
            <td>Информационные системы и технологии (сем.)</td> 
        </tr> 
        <tr> 
            <th rowspan="2" class="table-info">10:15 - 11:45</th> 
            <td class="first-subj">Система поддержки принятия решений (лекц.)</td> 
        </tr> 
        <tr> 
            <td class="double-subj">Экономика и организация предприятия (сем.)</td> 
        </tr> 
        <tr> 
            <th class="table-info">12:10 - 13:40</th> 
            <td>Электронный бизнес на международном рынке товаров и услуг (сем.)</td> 
        </tr> 
        <tr> 
            <th rowspan="2" class="table-info">13:55 - 15:25</th> 
            <td class="first-subj">Проектирование информационных систем (практ.)</td> 
        </tr> 
        <tr> 
            <td class="double-subj">Базы данных (лекц.)</td> 
        </tr> 
        <thead class="thead-light"> 
        <tr> 
            <th class="days" colspan="2">Пятница</th> 
        </tr> 
        </thead> 
        <tr> 
            <th rowspan="2" class="table-info">08:30 - 10:00</th> 
            <td class="first-subj">Экономика и организация предприятия (лекц.)</td> 
        </tr> 
        <tr> 
            <td class="double-subj">Проектирование информационных систем (лекц.)</td> 
        </tr> 
        <tr> 
            <th class="table-info">10:15 - 11:45</th> 
            <td>Исследование операций и методы оптимизации (сем.)</td> 
        </tr> 
        <tr> 
            <th rowspan="2" class="table-info">12:10 - 13:40</th> 
            <td class="first-subj">Базы данных (лекц.)</td> 
        </tr> 
        <tr> 
            <td class="double-subj">Системы поддержки принятия решений (сем.)</td> 
        </tr> 
     </tbody> 
    </table> 
 
 
    <script src="./js/script.js"></script> 
</body> 
</html>

Answer 1

Не надо бояться циклов... JS выполняет их примерно... писец как быстро !) Миллионы итераций - раз плюнуть. Если смущает количество кода, можно записать две универсальных функции, которые будут получать элемент/список элементов и скрывать или показывать их... но всё равно используя перебор.

let selectWeeks = document.getElementById('week'); 
 
let classes = [ 
  document.querySelectorAll('.first-subj'), 
  document.querySelectorAll('.double-subj'), 
]; 
 
// Если использовать обычную функцию, а не стрелочную,  
// this будет указывать на элемент, который запустил функцию (селект). Что удобно. 
selectWeeks.addEventListener('change', function() { 
  let index = this.value - 1; // получится или 0 или 1 
  let other = Math.pow( 0, index );  
  // просто ради прикола. Здесь надо взять все остальные элементы массива кроме index 
  // 0 в степени 0 будет 1, а 0 в степени 1 будет 0)) 
 
  let toShow = classes[index]; 
  if( toShow ){ 
    hide( classes[other] ); 
    show( toShow ); 
  } 
}); 
 
/***************/ 
 
function hide(elems) { 
  if (elems instanceof HTMLElement) { 
    elems.style.display = "none"; 
    return; 
  } 
  Array.from(elems).forEach(e => e.style.display = "none"); 
} 
 
function show(elems, display) { 
  display = display || 'block'; 
  if (elems instanceof HTMLElement) { 
    elems.style.display = display; 
    return; 
  } 
  Array.from(elems).forEach(e => e.style.display = display); 
}
.days { 
  padding: 10px; 
  text-align: center; 
} 
 
.time { 
  padding: 10px; 
} 
 
p { 
  display: inline; 
}
<h1>Расписание</h1> 
<p>Неделя:</p> 
<select name="week" id="week"> 
  <option value="0">Выбери неделю</option> 
  <option value="1">Верхняя</option> 
  <option value="2">Нижняя</option> 
</select> 
<table class="table table-bordered"> 
  <tbody> 
    <thead class="thead-light"> 
      <tr> 
        <th class="days" colspan="2">Понедельник</th> 
      </tr> 
    </thead> 
    <tr> 
      <th class="time table-warning">Время</th> 
      <th align="left" class="table-warning">Предметы</th> 
    </tr> 
 
    <tr> 
      <th class="table-info">08:30 - 10:00</th> 
      <td class="">Математическое и имитационное моделирование (практ.)</td> 
    </tr> 
    <tr> 
      <th class="table-info">10:15 - 11:45</th> 
      <td class="">Информационная безопасность (лекц.)</td> 
    </tr> 
    <tr> 
      <th rowspan="2" class="table-info">12:10 - 13:40</th> 
      <td class="first-subj">Теория вероятностей и математическая статистика (сем.) </td> 
    </tr> 
    <tr> 
      <td class="double-subj">Электронный бизнес на международном рынке товаров и услуг (лекц.)</td> 
    </tr> 
    <tr> 
      <th rowspan="2" class="table-info">13:55 - 15:25</th> 
      <td class="first-subj">Программная инженерия (практ.)</td> 
    </tr> 
    <tr> 
      <td class="double-subj">Теория вероятностей и математическая статистика (сем.)</td> 
    </tr> 
    <thead class="thead-light"> 
      <tr> 
        <th class="days" colspan="2">Вторник</th> 
      </tr> 
    </thead> 
    <tr> 
      <th rowspan="2" class="table-info">08:30 - 10:00</th> 
      <td class="first-subj">Системы поддержки принятия решений (практ.)</td> 
    </tr> 
    <tr> 
      <td class="double-subj">Программная инженерия (практ.)</td> 
    </tr> 
    <tr> 
      <th class="table-info">10:15 - 11:45</th> 
      <td>Теория вероятностей и математическая статистика (лекц.)</td> 
    </tr> 
    <tr> 
      <th rowspan="2" class="table-info">12:10 - 13:40</th> 
      <td class="first-subj">Электронный бизнес на международном рынке товаров и услуг</td> 
    </tr> 
    <tr> 
      <td class="double-subj">Математическое и имитационное моделирование (лекц.)</td> 
    </tr> 
    <tr> 
      <th rowspan="2" class="table-info">13:55 - 15:25</th> 
      <td class="first-subj">- </td> 
    </tr> 
    <tr> 
      <td class="double-subj">Базы данных (практ.)</td> 
    </tr> 
    <thead class="thead-light"> 
      <tr> 
        <th class="days" colspan="2">Среда</th> 
      </tr> 
    </thead> 
    <tr> 
      <th rowspan="2" class="table-info">08:30 - 10:00</th> 
      <td class="first-subj">Исследование операций и методы оптимизации (лекц.)</td> 
    </tr> 
    <tr> 
      <td class="double-subj">Информационная безопасность (практ.)</td> 
    </tr> 
    <tr> 
      <th rowspan="2" class="table-info">10:15 - 11:45</th> 
      <td class="first-subj">Программная инженерия (лекц.)</td> 
    </tr> 
    <tr> 
      <td class="double-subj">Проектирование информационных систем (практ.)</td> 
    </tr> 
    <tr> 
      <th rowspan="2" class="table-info">12:10 - 13:40</th> 
      <td class="first-subj">Экономика и организация предприятия (сем.)</td> 
    </tr> 
    <tr> 
      <td class="double-subj">Информационные системы и технологии (лекц.)</td> 
    </tr> 
    <thead class="thead-light"> 
      <tr> 
        <th class="days" colspan="2">Четверг</th> 
      </tr> 
    </thead> 
    <tr> 
      <th class="table-info">08:30 - 10:00</th> 
      <td>Информационные системы и технологии (сем.)</td> 
    </tr> 
    <tr> 
      <th rowspan="2" class="table-info">10:15 - 11:45</th> 
      <td class="first-subj">Система поддержки принятия решений (лекц.)</td> 
    </tr> 
    <tr> 
      <td class="double-subj">Экономика и организация предприятия (сем.)</td> 
    </tr> 
    <tr> 
      <th class="table-info">12:10 - 13:40</th> 
      <td>Электронный бизнес на международном рынке товаров и услуг (сем.)</td> 
    </tr> 
    <tr> 
      <th rowspan="2" class="table-info">13:55 - 15:25</th> 
      <td class="first-subj">Проектирование информационных систем (практ.)</td> 
    </tr> 
    <tr> 
      <td class="double-subj">Базы данных (лекц.)</td> 
    </tr> 
    <thead class="thead-light"> 
      <tr> 
        <th class="days" colspan="2">Пятница</th> 
      </tr> 
    </thead> 
    <tr> 
      <th rowspan="2" class="table-info">08:30 - 10:00</th> 
      <td class="first-subj">Экономика и организация предприятия (лекц.)</td> 
    </tr> 
    <tr> 
      <td class="double-subj">Проектирование информационных систем (лекц.)</td> 
    </tr> 
    <tr> 
      <th class="table-info">10:15 - 11:45</th> 
      <td>Исследование операций и методы оптимизации (сем.)</td> 
    </tr> 
    <tr> 
      <th rowspan="2" class="table-info">12:10 - 13:40</th> 
      <td class="first-subj">Базы данных (лекц.)</td> 
    </tr> 
    <tr> 
      <td class="double-subj">Системы поддержки принятия решений (сем.)</td> 
    </tr> 
  </tbody> 
</table>

Answer 2

Не надо изобретать велосипед и делать то, что браузер может сделать сам. Просто вешаешь какой-нибудь класс на таблицу и в css скрываешь лишнее.

document.getElementById('week').addEventListener('change', function(e) { 
  var cl = document.getElementById('schedule').classList 
 
  cl.remove('top-only') 
  cl.remove('bottom-only') 
  cl.add(e.target.value) 
})
.days { 
  padding: 10px; 
  text-align: center; 
} 
 
.time { 
  padding: 10px; 
} 
 
.top-only .double-subj, .bottom-only .first-subj { 
  display: none; 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 
 
<h1>Расписание</h1> 
<p>Неделя:</p> 
<select name="week" id="week"> 
  <option value="both">Выбери неделю</option> 
  <option value="top-only">Верхняя</option> 
  <option value="bottom-only">Нижняя</option> 
</select> 
<table id="schedule" class="table table-bordered"> 
  <tbody> 
    <thead class="thead-light"> 
      <tr> 
        <th class="days" colspan="2">Понедельник</th> 
      </tr> 
    </thead> 
    <tr> 
      <th class="time table-warning">Время</th> 
      <th align="left" class="table-warning">Предметы</th> 
    </tr> 
 
    <tr> 
      <th class="table-info">08:30 - 10:00</th> 
      <td class="">Математическое и имитационное моделирование (практ.)</td> 
    </tr> 
    <tr> 
      <th class="table-info">10:15 - 11:45</th> 
      <td class="">Информационная безопасность (лекц.)</td> 
    </tr> 
    <tr> 
      <th rowspan="2" class="table-info">12:10 - 13:40</th> 
      <td class="first-subj">Теория вероятностей и математическая статистика (сем.) </td> 
    </tr> 
    <tr> 
      <td class="double-subj">Электронный бизнес на международном рынке товаров и услуг (лекц.)</td> 
    </tr> 
    <tr> 
      <th rowspan="2" class="table-info">13:55 - 15:25</th> 
      <td class="first-subj">Программная инженерия (практ.)</td> 
    </tr> 
    <tr> 
      <td class="double-subj">Теория вероятностей и математическая статистика (сем.)</td> 
    </tr> 
    <thead class="thead-light"> 
      <tr> 
        <th class="days" colspan="2">Вторник</th> 
      </tr> 
    </thead> 
    <tr> 
      <th rowspan="2" class="table-info">08:30 - 10:00</th> 
      <td class="first-subj">Системы поддержки принятия решений (практ.)</td> 
    </tr> 
    <tr> 
      <td class="double-subj">Программная инженерия (практ.)</td> 
    </tr> 
    <tr> 
      <th class="table-info">10:15 - 11:45</th> 
      <td>Теория вероятностей и математическая статистика (лекц.)</td> 
    </tr> 
    <tr> 
      <th rowspan="2" class="table-info">12:10 - 13:40</th> 
      <td class="first-subj">Электронный бизнес на международном рынке товаров и услуг</td> 
    </tr> 
    <tr> 
      <td class="double-subj">Математическое и имитационное моделирование (лекц.)</td> 
    </tr> 
    <tr> 
      <th rowspan="2" class="table-info">13:55 - 15:25</th> 
      <td class="first-subj">- </td> 
    </tr> 
    <tr> 
      <td class="double-subj">Базы данных (практ.)</td> 
    </tr> 
    <thead class="thead-light"> 
      <tr> 
        <th class="days" colspan="2">Среда</th> 
      </tr> 
    </thead> 
    <tr> 
      <th rowspan="2" class="table-info">08:30 - 10:00</th> 
      <td class="first-subj">Исследование операций и методы оптимизации (лекц.)</td> 
    </tr> 
    <tr> 
      <td class="double-subj">Информационная безопасность (практ.)</td> 
    </tr> 
    <tr> 
      <th rowspan="2" class="table-info">10:15 - 11:45</th> 
      <td class="first-subj">Программная инженерия (лекц.)</td> 
    </tr> 
    <tr> 
      <td class="double-subj">Проектирование информационных систем (практ.)</td> 
    </tr> 
    <tr> 
      <th rowspan="2" class="table-info">12:10 - 13:40</th> 
      <td class="first-subj">Экономика и организация предприятия (сем.)</td> 
    </tr> 
    <tr> 
      <td class="double-subj">Информационные системы и технологии (лекц.)</td> 
    </tr> 
    <thead class="thead-light"> 
      <tr> 
        <th class="days" colspan="2">Четверг</th> 
      </tr> 
    </thead> 
    <tr> 
      <th class="table-info">08:30 - 10:00</th> 
      <td>Информационные системы и технологии (сем.)</td> 
    </tr> 
    <tr> 
      <th rowspan="2" class="table-info">10:15 - 11:45</th> 
      <td class="first-subj">Система поддержки принятия решений (лекц.)</td> 
    </tr> 
    <tr> 
      <td class="double-subj">Экономика и организация предприятия (сем.)</td> 
    </tr> 
    <tr> 
      <th class="table-info">12:10 - 13:40</th> 
      <td>Электронный бизнес на международном рынке товаров и услуг (сем.)</td> 
    </tr> 
    <tr> 
      <th rowspan="2" class="table-info">13:55 - 15:25</th> 
      <td class="first-subj">Проектирование информационных систем (практ.)</td> 
    </tr> 
    <tr> 
      <td class="double-subj">Базы данных (лекц.)</td> 
    </tr> 
    <thead class="thead-light"> 
      <tr> 
        <th class="days" colspan="2">Пятница</th> 
      </tr> 
    </thead> 
    <tr> 
      <th rowspan="2" class="table-info">08:30 - 10:00</th> 
      <td class="first-subj">Экономика и организация предприятия (лекц.)</td> 
    </tr> 
    <tr> 
      <td class="double-subj">Проектирование информационных систем (лекц.)</td> 
    </tr> 
    <tr> 
      <th class="table-info">10:15 - 11:45</th> 
      <td>Исследование операций и методы оптимизации (сем.)</td> 
    </tr> 
    <tr> 
      <th rowspan="2" class="table-info">12:10 - 13:40</th> 
      <td class="first-subj">Базы данных (лекц.)</td> 
    </tr> 
    <tr> 
      <td class="double-subj">Системы поддержки принятия решений (сем.)</td> 
    </tr> 
  </tbody> 
</table>

READ ALSO
Обработчики событий js
javascript

Обработчики событий js

Использую плагин sly js для горизонтального скроллинга элементовЕсть такая вёрстка (просто как пример):

 236
Закрыть несколько вкладок сразу
javascript

Закрыть несколько вкладок сразу

Ребята, возникла огромная проблема, допустим, есть главная страница, с этой страницы открыли еще одно окно(в новом окне соответственно), а с новой...

 208
Вывод количества оставшихся для ввода символов
javascript

Вывод количества оставшихся для ввода символов

Дано 160 символовЕсли писать кириллицей - 70, а латиницей 160

 170
Проверка select на выбраное значение js
javascript

Проверка select на выбраное значение js

Задача чтобы при blur, если выбрано значение в селекте, он подсвечивался зелёным, если стоит не указано подсвечивался краснымУ меня сейчас...

 216