При клике на кнопку, всплывает блок, как оптимизировать js?

Question

[Антон Вебсайтовский]

Всем привет, написал легкую функцию для двух блоков с кнопками и текстом.

Две блока в них есть кнопки, при клике на кнопку открывает блок, при этом если второй блок открыт, то скрывает его, и меняет надпись в кнопке если блок открылся, и делаем кнопку не кликабельной. И применяется класс к блоку, где нажали кнопку, ну типа выделаем блок активным.

Все это сделано, вопрос в другом, на мой взгляд js слишком длинный, как-то можно оптимизировать ?

Рабочая схема тут:
https://codepen.io/AXOT/pen/WNaXxag

Answer 1

[HardBot]

Ну, вот так можно:

const buttons = $('.btt1, .btt2');
const tabs = $('.rr1, .rr2');
const modes = $('#rych, #autm');

buttons.on('click', function() {
  const isManualMode = $(this).is('.btt1');
  const buttonText = `Выбран ${isManualMode ? 'ручной' : 'автоматический'} режим`;

  buttons.prop('disabled', false)
    .removeClass('activvBt')
    .html(`Заполнить в ${isManualMode ? 'автоматическом' : 'ручном'} режиме<i class="icon-arr"></i>`);

  $(this).prop('disabled', true)
    .addClass('activvBt')
    .text(buttonText);

  tabs.hide().eq(isManualMode ? 0 : 1).show(100);
  modes.removeClass('activv').eq(isManualMode ? 0 : 1).addClass('activv');
});

UPD: Кнопки, табы и т.д. можно вынести в один атрибут, чтобы не писать в ручную и искать все эти атрибуты и все.

Comments

[Антон Вебсайтовский]

ага я уже понял, не плохо ) код меньше и более продуманный.
спасибо

[Антон Вебсайтовский]

В примере работает, я там еще добавил два варианта ! ну и продублировал js, и для двух вариантов пришлось id прописать другие чтоб работало все и т.д.

На сайте у меня не работает, консоль ошибку не показывает, jquery-3.2.1.min.js, подключен такой.
https://codepen.io/AXOT/pen/xxyPJJx

[Антон Вебсайтовский]

Не дело не в jquery, убирал другие js на сайте, все равно не работает.

[Антон Вебсайтовский]

Вообщем, над ставить js ниже те блоков, которые при клике показываем.