Помогите правильно сократить код JS путем добавлений переменных

Рейтинг: 0Ответов: 1Опубликовано: 08.01.2023

Уважаемые разработчики) помогите правильно сократить JS код, путем добавления переменных к модальным окнам и кнопкам. Я начинающий мастер-ломастер, поэтому мои попытки решить эту проблему сводятся не к мастерству, а вот как раз к поломке кода(( Буду весьма признателен) Есть стиль модального окна который применяется ко все окнам, и есть сами окна (всего 4, но в будущем наверное добавиться еще парочка, но это не точно) и есть кнопки, которые открывают эти окна (тоже 4 штуки, что логично), как Вы уже заметили, сделал я их максимально кустарным методом, но соответственно это будет сильно грузить страницу. Мне нужно его сократить к минимуму, но с возможностью в будущем добавлять новые переменные

function openNav() {
  document.getElementById("myNav").style.height = "100%";
}

function openNav2() {
  document.getElementById("myNav2").style.height = "100%";
}

function openNav3() {
  document.getElementById("myNav3").style.height = "100%";
}

function openNav4() {
  document.getElementById("myNav4").style.height = "100%";
}

function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}

function closeNav2() {
  document.getElementById("myNav2").style.height = "0%";
}

function closeNav3() {
  document.getElementById("myNav3").style.height = "0%";
}

function closeNav4() {
  document.getElementById("myNav4").style.height = "0%";
}
// Закрыть окно при нажатии в любом месте
window.onclick = function(event) {
  if (event.target == myNav) {
    myNav.style.height = "0%";
  }
  if (event.target == myNav2) {
    myNav2.style.height = "0%";
  }
  if (event.target == myNav3) {
    myNav3.style.height = "0%";
  }
  if (event.target == myNav4) {
    myNav4.style.height = "0%";
  }
}
.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  background-color: rgb(0, 0, 0);
  background-color: rgb(0, 0, 0, 0.85);
  overflow: auto;
  transition: 0.5s;
}

.overlay-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fefefe;
  border-radius: 15px 15px 0px 0px;
  width: auto;
}

.modal-header {
  padding: 2px 15px;
  background: transparent;
  color: black;
}

.line {
  display: flex;
  width: auto;
  margin: 10;
  border: 1px solid gainsboro;
}

.modal-body {
  padding: 2px 10px;
}

.modal-params {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0;
  width: auto;
  height: auto;
}

.params {
  vertical-align: middle;
  color: rgb(0, 0, 0);
  font-size: 16px;
  font-weight: lighter;
  align-items: center;
  margin: 10;
  width: auto;
  height: 20px;
  cursor: pointer;
}

.params>img {
  vertical-align: middle;
  margin-right: 10;
  width: 20;
  height: 20;
}

.closebtn {
  position: absolute;
  top: 20px;
  right: 20px;
}

.closebtn>div>img {
  width: 16;
  height: 16;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="profile-button2">
                <div>
                    <img src="img/ico/more.png"> Инфо
                </div>
            </button>

<button class="profile-button2">
                <div>
                    <img src="img/ico/added.png">Друг
                </div>
 </button>

<button class="profile-button2">
            <div><img src="img/ico/marker.png"> Город</div>
        
</button>
<button class="wall-button">
            <div><img src="img/ico/upload.png"></div> 
            <div>Загрузить медиа</div>
        </button>

<!-- The Modal -->
<div id="myNav" class="overlay">
  <div class="overlay-content">
    <div class="modal-header">
      <h3>Профиль</h3>
      <a href="#" class="closebtn">
        <div><img src="img/ico/close.png"></div>
      </a>
    </div>
    <div class="modal-body">
      <div class="modal-params">
        <div class="params"><img src="img/ico/editing.png">Редактировать профиль</div>
        <div class="params"><img src="img/ico/camera.png">Изменить фото</div>
        <div class="params"><img src="img/ico/picture.png">Изменить обложку</div>
        <div class="line"></div>

        <div class="params"><img src="img/ico/lock.png">Конфиденциальность</div>
        <div class="params"><img src="img/ico/setting.png">Настройки профиля</div>
      </div>
    </div>
  </div>
</div>

<div id="myNav2" class="overlay">
  <div class="overlay-content">
    <div class="modal-header">
      <h3>Настройки друга</h3>
      <a href="#" class="closebtn">
        <div><img src="img/ico/close.png"></div>
      </a>
    </div>
    <div class="modal-body">
      <div class="modal-params">
        <div class="params"><img src="img/ico/remove-friend.png">Удалить друга</div>
        <div class="line"></div>
        <div class="params"><img src="img/ico/share-link.png">Поделиться</div>
        <div class="params"><img src="img/ico/copy.png">Копировать ссылку</div>
        <div class="line"></div>
        <div class="params"><img src="img/ico/sign.png">Жалоба</div>
        <div class="params"><img src="img/ico/do-not-disturb.png">Заблокировать</div>

      </div>
    </div>
  </div>
</div>
<div id="myNav3" class="overlay">
  <div class="overlay-content">
    <div class="modal-header">
      <h3>Подробная информация</h3>
      <a href="#" class="closebtn">
        <div><img src="img/ico/close.png"></div>
      </a>
    </div>
    <div class="modal-body">
      <div class="modal-params">
        <div class="params"><img src="img/ico/web-link.png"><a href="https://alfasamec.com">alfasamec.com</a></div>
        <div class="params"><img src="img/ico/mail.png"><a href="mailto:alfasamec@webref.com">alfasamec@webref.com</a></div>
        <div class="line"></div>
        <div class="params"><img src="img/ico/birthday-cake.png">День рождения: 28.07.1993 г.</div>
        <div class="params"><img src="img/ico/city.png">Город: Харьков</div>

      </div>
    </div>
  </div>
</div>
<div id="myNav4" class="overlay">
  <div class="overlay-content">
    <div class="modal-header">
      <h3>Что Вы хотите загрузить?</h3>
      <a href="#" class="closebtn">
        <div><img src="img/ico/close.png"></div>
      </a>
    </div>
    <div class="modal-body">
      <div class="modal-params">
        <div class="params"><img src="img/ico/image.png">Загрузить фото</div>
        <div class="params"><img src="img/ico/video.png">Загрузить видео</div>
        <div class="params"><img src="img/ico/music.png">Загрузить музыку</div>

      </div>
    </div>
  </div>
</div>

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Для начала можно переделать функции открытия модалок, объединив их в одну таким образом:

<button class="profile-button2" onclick="openNav('myNav')">...</button>
<button class="profile-button2" onclick="openNav('myNav2')">...</button>
....

// Просто передаём в качестве аргумента нужный айдишник
function openNav(id) {
  document.getElementById(id).style.height = "100%";
}

Попробуйте по аналогии переделать функцию закрытия модалок

function openNav(id) {
  document.getElementById(id).style.height = "100%";
}

function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}

function closeNav2() {
  document.getElementById("myNav2").style.height = "0%";
}

function closeNav3() {
  document.getElementById("myNav3").style.height = "0%";
}

function closeNav4() {
  document.getElementById("myNav4").style.height = "0%";
}
// Закрыть окно при нажатии в любом месте
window.onclick = function (event) {
  if (event.target == myNav) {
    myNav.style.height = "0%";
  }
  if (event.target == myNav2) {
    myNav2.style.height = "0%";
  }
  if (event.target == myNav3) {
    myNav3.style.height = "0%";
  }
  if (event.target == myNav4) {
    myNav4.style.height = "0%";
  }
};
.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  background-color: rgb(0, 0, 0);
  background-color: rgb(0, 0, 0, 0.85);
  overflow: auto;
  transition: 0.5s;
}

.overlay-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fefefe;
  border-radius: 15px 15px 0px 0px;
  width: auto;
}

.modal-header {
  padding: 2px 15px;
  background: transparent;
  color: black;
}

.line {
  display: flex;
  width: auto;
  margin: 10;
  border: 1px solid gainsboro;
}

.modal-body {
  padding: 2px 10px;
}

.modal-params {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0;
  width: auto;
  height: auto;
}

.params {
  vertical-align: middle;
  color: rgb(0, 0, 0);
  font-size: 16px;
  font-weight: lighter;
  align-items: center;
  margin: 10;
  width: auto;
  height: 20px;
  cursor: pointer;
}

.params>img {
  vertical-align: middle;
  margin-right: 10;
  width: 20;
  height: 20;
}

.closebtn {
  position: absolute;
  top: 20px;
  right: 20px;
}

.closebtn>div>img {
  width: 16;
  height: 16;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <button class="profile-button2">
    <div>
      <img src="img/ico/more.png"> Инфо
    </div>
  </button>

  <button class="profile-button2">
    <div>
      <img src="img/ico/added.png">Друг
    </div>
  </button>

  <button class="profile-button2">
    <div><img src="img/ico/marker.png"> Город</div>

  </button>
  <button class="wall-button">
    <div><img src="img/ico/upload.png"></div>
    <div>Загрузить медиа</div>
  </button>

  <!-- The Modal -->
  <div id="myNav" class="overlay">
    <div class="overlay-content">
      <div class="modal-header">
        <h3>Профиль</h3>
        <a href="#" class="closebtn">
          <div><img src="img/ico/close.png"></div>
        </a>
      </div>
      <div class="modal-body">
        <div class="modal-params">
          <div class="params"><img src="img/ico/editing.png">Редактировать профиль</div>
          <div class="params"><img src="img/ico/camera.png">Изменить фото</div>
          <div class="params"><img src="img/ico/picture.png">Изменить обложку</div>
          <div class="line"></div>

          <div class="params"><img src="img/ico/lock.png">Конфиденциальность</div>
          <div class="params"><img src="img/ico/setting.png">Настройки профиля</div>
        </div>
      </div>
    </div>
  </div>

  <div id="myNav2" class="overlay">
    <div class="overlay-content">
      <div class="modal-header">
        <h3>Настройки друга</h3>
        <a href="#" class="closebtn">
          <div><img src="img/ico/close.png"></div>
        </a>
      </div>
      <div class="modal-body">
        <div class="modal-params">
          <div class="params"><img src="img/ico/remove-friend.png">Удалить друга</div>
          <div class="line"></div>
          <div class="params"><img src="img/ico/share-link.png">Поделиться</div>
          <div class="params"><img src="img/ico/copy.png">Копировать ссылку</div>
          <div class="line"></div>
          <div class="params"><img src="img/ico/sign.png">Жалоба</div>
          <div class="params"><img src="img/ico/do-not-disturb.png">Заблокировать</div>

        </div>
      </div>
    </div>
  </div>
  <div id="myNav3" class="overlay">
    <div class="overlay-content">
      <div class="modal-header">
        <h3>Подробная информация</h3>
        <a href="#" class="closebtn">
          <div><img src="img/ico/close.png"></div>
        </a>
      </div>
      <div class="modal-body">
        <div class="modal-params">
          <div class="params"><img src="img/ico/web-link.png"><a href="https://alfasamec.com">alfasamec.com</a></div>
          <div class="params"><img src="img/ico/mail.png"><a href="mailto:alfasamec@webref.com">alfasamec@webref.com</a>
          </div>
          <div class="line"></div>
          <div class="params"><img src="img/ico/birthday-cake.png">День рождения: 28.07.1993 г.</div>
          <div class="params"><img src="img/ico/city.png">Город: Харьков</div>

        </div>
      </div>
    </div>
  </div>
  <div id="myNav4" class="overlay">
    <div class="overlay-content">
      <div class="modal-header">
        <h3>Что Вы хотите загрузить?</h3>
        <a href="#" class="closebtn">
          <div><img src="img/ico/close.png"></div>
        </a>
      </div>
      <div class="modal-body">
        <div class="modal-params">
          <div class="params"><img src="img/ico/image.png">Загрузить фото</div>
          <div class="params"><img src="img/ico/video.png">Загрузить видео</div>
          <div class="params"><img src="img/ico/music.png">Загрузить музыку</div>

        </div>
      </div>
    </div>
  </div>