Измените содержимое div после его щелчка и повторного нажатия

Question

Это код jQuery, который в основном открывает и закрывает div:

jQuery('#filter_werk').find('.raven-sortable').addClass('opened');

var toggle = document.getElementById('deknop');
var slider = document.querySelector('.raven-sortable');

toggle.addEventListener('click', toggleSlider, false);

function toggleSlider(){
    if (slider.classList.contains('opened')) {
        slider.classList.remove('opened');
        slider.classList.add('closed');
    } else {
        slider.classList.remove('closed');
        slider.classList.add('opened');
    }
}
</script>

Я пытаюсь изменить содержимое следующего div с «FILTER +» на «FILTER -» и снова на «FILTER +» при повторном нажатии

<div id="deknop">FILTER +</div>

Можно ли это сделать, не нарушая текущий код jQuery? Спасибо!

Answer 1

Как я понял, функция toggleSlider работает нормально, поэтому попробуйте:

function toggleSlider(){
    if (slider.classList.contains('opened')) {
        slider.classList.remove('opened');
        slider.classList.add('closed');
        toggle.innerHTML = "FILTER +";
    } else {
        slider.classList.remove('closed');
        slider.classList.add('opened');
        toggle.innerHTML = "FILTER -";
    }
}

Answer 2

Ну,

, если бы мне пришлось использовать этот стиль jQuery, я бы в любом случае попытался отделить данные от представления.Что-то вроде:

(() => {
  const state = {
    sliderOpen: true,
  };

  const $slider = $('.raven-sortable');
  const $toggle = $('#deknop');

  const updateView = () => {
    if (state.sliderOpen) {
      $slider.addClass('opened').removeClass('closed');
    } else {
      $slider.addClass('closed').removeClass('opened');
    }

    $toggle.text(`FILTER ${state.sliderOpen ? '+' : '-'}`);
  };

  const onToggleClick = () => {
    state.sliderOpen = !state.sliderOpen;
    updateView();
  };

  $toggle.click(onToggleClick);
  
  updateView();
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="raven-sortable">Raven sortable</button>

<button id="deknop"></button>

Answer 3

Вы можете добавить к своей функции toggleSlider() некоторую логику, которая изменит ваш текст #deknop в зависимости от его текущего состояния («FILTER +» или «FILTER -», например:

function toggleSlider(){
    $('#deknop').html($('#deknop').text() == 'FILTER +' ? 'FILTER -' : 'FILTER +');
    if (slider.classList.contains('opened')) {
        slider.classList.remove('opened');
        slider.classList.add('closed');
    } else {
        slider.classList.remove('closed');
        slider.classList.add('opened');
    }
}