javascript - 尝试使用 jQuery 更改 Wordpress 粘性徽标图像 src

Question

我在 wordpress 上，我想在标题变粘时更改默认徽标：出现
类.is-sticky，这很重要。

（另外我正在使用小插件进行音译 - 西里尔文到拉丁文脚本，同时我将能够根据当前字母更改粘性徽标，因为body有类body.cir或者body.lat如果是西里尔文/拉丁文）

CSS 定位工作正常，例如：

body.lat .is-sticky img.kad-standard-logo{
   border: solid 1px red;
}
body.cir .is-sticky img.kad-standard-logo{
   border: solid 1px blue;
}

或者更准确地说，(not to be confused with my alphabet classes)类.is-sticky出现在页面滚动上，然后我想更改徽标，

添加边框例如：

.is-sticky img.kad-standard-logo{
   border: solid 1px red;
}

没关系。

我不想使用：

content: url(logo.png)
background: url(logo.png)

我正在尝试像这样更改徽标，但它不起作用：

jQuery(function($) {

   var cyril = "https://mysite.domain/images/logo_sticky-cir.png";
   var lats ="https://mysite.domain/images/logo_sticky-lat.png" ;
   var logoDefault = $('.kad-standard-logo').attr('src'); //Wordpress theme options default logo

   $('body.cir .is-sticky img.kad-standard-logo').attr('src', cyril);
   $('body.lat .is-sticky img.kad-standard-logo').attr('src', lats);
});

也许类.is-sticky存在一些冲突，因为它来自粘性标题的主脚本或其他任何内容以及何时从脚本中排除：

$('body.cir img.kad-standard-logo').attr('src', cyril);
$('body.lat img.kad-standard-logo').attr('src', lats);

要不就

$('img.kad-standard-logo').attr('src', lats);

有用，

但我需要什么时候.is-sticky

我希望这个描述是可以理解的，

任何建议，请，

谢谢。

标签： javascriptjquerysticky

Answer 1

此 JS 在页面加载时执行，并且由于您使用的是jQuery(function(){})表单，它实际上会等到DOMContentLoaded事件被触发。基本上，只有当您加载页面时 img已经粘滞时，此代码才会更改某些内容。它不是，所以没有什么可以改变的。这就是为什么当您放下 时.is-sticky，它会起作用。

为了完成你想要的，你需要监听类的变化，或者绑定一个自定义事件并触发它：等到 HTML 元素得到一个类然后做一些事情

我个人建议使用容器和 CSSbackground-image来执行此操作，无论如何这会更快，性能更高。随意使用 CSS 糖，transition: background-image 0.2s ease-in这样变化不会起伏不定。我强烈建议走这条路线，而不是使用昂贵的 JS 加载页面。

前任。：

body img.kad-standard-logo {
    transition: background-image 0.2s ease-in;
}

body.lat .is-sticky img.kad-standard-logo {
    background-image: url(https://mysite.domain/images/logo_sticky-lat.png);
}

body.cir .is-sticky img.kad-standard-logo {
    background-image: url(https://mysite.domain/images/logo_sticky-cir.png);
}