jquery - 在类更改时，使用 jQuery 更新 HTML 属性

Question

我使用的 WordPress 主题添加了两个 Logo ，网站加载时为深色 Logo ，滚动时激活粘性导航时为浅色 Logo 。当粘性导航处于事件状态时，“scrolled”类将添加到包含的 div，“scroll_header_top_area”。

如果我已经向下滚动页面并且粘性导航处于事件状态并且我刷新页面，则下面的代码有效，但它不会在滚动时动态切换 Logo 。

我看到了使用 MutationObserver 的建议但恐怕我无法理解示例或如何在此处使用它。

我将如何更改此代码以根据“滚动”类是否处于事件状态进行动态更改。

if  ( $j('.scroll_header_top_area').hasClass('scrolled'))  {

    $j(".q_logo img").attr("src","path_to_image/light.png");
}

else {
    $j(".q_logo img").attr("src","path_to_image/dark.png");
}

Answer 1

听起来您需要一个事件处理程序。这将处理滚动事件。

$j(".q_logo img").attr("src","path_to_img/dark.png");   

$( window ).scroll(function() {

    if( $j('.scroll_header_top_area').hasClass('scrolled'))
    {
        $j(".q_logo img").attr("src","path_to_image/light.png");
    }
    else{
        $j(".q_logo img").attr("src","path_to_image/dark.png");
    }
});