Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.06.2022, 11:32
Аспирант
Отправить личное сообщение для Volonter Посмотреть профиль Найти все сообщения от Volonter
 
Регистрация: 18.01.2011
Сообщений: 84

Более лаконичный код простой функции, как?
Всем привет! Как более красиво и лаконично переписать такую функцию?
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')
    }
}

Заранее благодарен!
Ответить с цитированием
  #2 (permalink)  
Старый 01.06.2022, 11:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Volonter,
а полноценный макет никак? а описание, что делает функция нафига?
Ответить с цитированием
  #3 (permalink)  
Старый 01.06.2022, 11:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #4 (permalink)  
Старый 01.06.2022, 12:35
Аспирант
Отправить личное сообщение для Volonter Посмотреть профиль Найти все сообщения от Volonter
 
Регистрация: 18.01.2011
Сообщений: 84

рони,
не совсем то, мне надо чтобы если колонка имеет класс col-3 то менялось на col-1 и\или наоборот, при этом у контента соответственно col-9 на col-11 и\или наоборот. Это надо чтобы сворачивать бутстраповскую сетку
Ответить с цитированием
  #5 (permalink)  
Старый 01.06.2022, 13:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вызов объекта из анонимной функции. Подскажите как работает код. mnzi Events/DOM/Window 9 16.02.2018 11:45
Как проще писать код? jtag Node.JS 3 05.12.2017 18:08
В callback функции теряется контекст. Как это обойти? xintrea AJAX и COMET 4 02.06.2013 11:40
JS классы - как объединить функции в класс olga153b Events/DOM/Window 3 01.11.2011 14:13
Переменная как значение функции. Jurasmi Общие вопросы Javascript 7 22.04.2010 12:45