Question

我正在尝试使用JS在页面加载时将一个类（.load）添加到div（#widget2）。我已经使用代码片段在开发人员工具中测试了代码并且它工作正常，但是在将代码插入页眉并加载页面之后我无法使其工作。我认为可能与插件有冲突，但我不认为是这种情况。希望有人可以帮助我解决这个问题。

这是网站。它在WordPress上：https://greenvillesolarsolutions.com/ 我想要做的是通过在页面加载后添加一个css类来延迟显示背景视频（用CSS隐藏）。下面是我的html，css和JS。

HTML：

<div class="vc_video-bg vc_hidden-xs">

<iframe id="widget2" class="inner" frameborder="0" allowfullscreen="1" 
allow="autoplay; encrypted-media" title="YouTube video player"></iframe>

</div>

CSS：

#widget2 {
    opacity: 0;
    -webkit-transition: opacity 2s ease-in;
    -moz-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    -ms-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in;
}

#widget2.load {
    opacity: 1 !important;
}

JS：

<script type='text/javascript'>
$(document).ready(function() {
  $('#widget2').addClass('load');
});
</script>

这是驱动坚果，我不能让它工作。谢谢你的帮助！

Answer 1

无论出于何种原因，$似乎都不是您网站上jQuery的别名。通过在控制台中看到此错误就可以看出这一点：

Uncaught TypeError: $ is not a function

试试这个：

jQuery('#widget2').addClass('load');

Answer 2

您是否尝试过香草解决方案document.querySelector('#widget2').classList.add('load')？我在页面上的devtools控制台中尝试了它，但它确实有效。

.addClass Javascript代码无法正常执行 - WordPress网站

2 个答案: