類更改后的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);

它像#bar ，但是問題是如果#foo不再具有名為open類，如何將#bar的樣式還原為默認樣式？

坦白說，我沒有使用javascript的經驗，所以我不了解'setTimeout（checkForChanges，500）;`

所有我需要的是改變#bar當風格#foo擁有一流的open ，並獲得#bar風格回默認時#foo不再有階級open

Answer 1

您不需要為此設置超時或間隔。 利用CSS的特殊性 ：

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特異性。

Answer 2

使用setInterval而不是setTimeout

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