在单击并再次单击div后更改div内容
在单击并再次单击div后更改div内容
提问于 2019-03-15 07:41:46
这是基本上打开和关闭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代码的情况下做到这一点吗？谢谢!
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-03-15 07:48:26
据我所知，函数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 -";
}
}Stack Overflow用户
发布于 2019-03-15 07:54:17
您可以向toggleSlider()函数添加一些逻辑，这些逻辑将根据当前的过滤器文本(‘#deknop +’或‘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');
}
}Stack Overflow用户
发布于 2019-03-15 08:02:00
井,
如果必须以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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55173593
复制相关文章
相似问题