Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Более лаконичный код простой функции, как? (https://javascript.ru/forum/events/84090-bolee-lakonichnyjj-kod-prostojj-funkcii-kak.html)

Volonter 01.06.2022 11:32

Более лаконичный код простой функции, как?
 
Всем привет! Как более красиво и лаконично переписать такую функцию?
const toggleBtn = document.getElementById('toggle')
const sidebar = document.getElementById('sidebar')
const content = document.getElementById('content')
toggleBtn.addEventListener('click', sidecollapse, false)

function sidecollapse() {
    if (sidebar.classList.contains('col-3')) {
        sidebar.classList.remove('col-3')
        sidebar.classList.add('col-1')
    } else {
        sidebar.classList.remove('col-1')
        sidebar.classList.add('col-3')
    }


    if (content.classList.contains('col-9')) {
        content.classList.remove('col-9')
        content.classList.add('col-11')
    } else {
        content.classList.remove('col-11')
        content.classList.add('col-9')
    }
}

Заранее благодарен!

рони 01.06.2022 11:43

Volonter,
а полноценный макет никак? а описание, что делает функция нафига?

рони 01.06.2022 11:52

Volonter,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .col-1 {
        background-color: #FFFF00;
   }
   .col-3 {
        background-color: #FF0000;
   }
   .col-9{
       background-color: #8B4513;
   }
   .col-11{
       background-color: #0000FF;
   }
  </style>

  </script>
</head>

<body>
<div id="sidebar" class="col-3">sidebar</div>
<div id="content" class="col-9">content</div>
<input id="toggle" name="" type="button" value="toggle">
<script>
const toggleBtn = document.getElementById('toggle')
const sidebar = document.getElementById('sidebar')
const content = document.getElementById('content')
toggleBtn.addEventListener('click', sidecollapse, false)

function sidecollapse() {
    sidebar.classList.toggle('col-3');
    sidebar.classList.toggle('col-1');
    content.classList.toggle('col-11');
    content.classList.toggle('col-9');
}

</script>
</body>
</html>

Volonter 01.06.2022 12:35

рони,
не совсем то, мне надо чтобы если колонка имеет класс col-3 то менялось на col-1 и\или наоборот, при этом у контента соответственно col-9 на col-11 и\или наоборот. Это надо чтобы сворачивать бутстраповскую сетку

рони 01.06.2022 13:15

Цитата:

Сообщение от Volonter
мне надо чтобы если колонка имеет класс col-3 то менялось на col-1 и\или наоборот, при этом у контента соответственно col-9 на col-11 и\или наоборот.

что в коде не так?


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