Javascript 单击并再次单击后更改div内容

这是基本上打开和关闭div的jQuery代码：

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代码的情况下完成吗？

---

谢谢大家!

据我所知，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 -";
    }
}

---

您可以向toggleSlider函数添加一些逻辑，根据当前的“FILTER+”或“FILTER-”更改deknop文本，如下所示：

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');
    }
}

那么

如果必须使用这种jQuery风格，我会尝试将数据与视图分离。比如：

=> { 常量状态={ sliderOpen:没错， }; 常量$slider=$'.raven sortable'； 常量$toggle=$'deknop'； const updateView==>{ 如果state.sliderOpen{ $slider.addClass'opened'。removeClass'closed'； }否则{ $slider.addClass'closed'。removeClass'opened'； } $toggle.text`FILTER${state.sliderOpen？'+'：'-'}`； }; const onToggleClick==>{ state.sliderOpen=！state.sliderOpen； 更新视图； }; $toggle.clickonToggleClick； 更新视图； }; 乌鸦分类

---

这工作完美无瑕，感谢您花时间多教我一点。幸运的是，这不起作用，因为我在更改HTML中的任何内容时受到限制。谢谢你抽出时间。非常感谢Krzysztof！我没有在HTML中更改任何内容。我只选了JS：