javascript - 类更改后的 Jquery 函数

Question

假设我有一个带有功能的按钮，将一个名为 open 的类添加到 div#foo 元素，当这一切完成后，我需要更改其他元素样式div#bar

仅供引用，div#bar 的默认样式是 position:fixed

这是我的代码

function checkForChanges()
{
    if ($('#foo').hasClass('open'))
        $('#bar').css('position','relative');
    else
        setTimeout(checkForChanges, 500);
}  
$(checkForChanges);

它就像一个魅力，但问题是如果#foo不再有名为的类，如何将#bar的样式恢复为默认样式打开？

坦白说，我没有 JavaScript 经验，所以我不知道“setTimeout(checkForChanges, 500);”

我需要的只是当 #foo 具有类 open 时更改 #bar 样式并获取 #bar > 当#foo不再有类open

时，样式恢复为默认

Answer 1

您不需要为此设置超时或间隔。利用CSS specificity :

var open = 'someCondition';
if(open) {
    $('#foo').addClass('open');
    $('#bar').addClass('foo-open');
} else {
    $('#foo').removeClass('open');
    $('#bar').removeClass('foo-open');
}

#bar {
    position: fixed;
}

#bar.foo-open {
    position: relative;
}

无论什么代码负责将类open添加到#foo，也应该将类foo-open添加到#bar .

另请查看cssspecificity.com CSS 特异性的有趣可视化。