Question

我有一个wordpress页面，我想在主页的标题上显示精选图像，但没有其他页面。我设置了一个脚本来读取body标签是否包含“home”类并显示基于该类的图像。代码如下所示：

<script>
    if($('body').hasClass("home")) {
    $('#headshot').html('<img src="http://www.kieferslaton.com/wp-content/uploads/2015/04/Headshot1.png" alt="headshot">');
}
</script>

这个脚本出了什么问题？

Answer 1

尝试将代码包装到DOM ready上触发的函数中：

<script>
    $(function() {
        if($('body').hasClass("home")) {
            $('#headshot').html('<img src="http://www.kieferslaton.com/wp-content/uploads/2015/04/Headshot1.png" alt="headshot">');
        }
    });
</script>

More info

Answer 2

jQuery需要知道何时启动该功能。文档准备好后启动它。

$(document).ready(function(){
    if($('body').hasClass("home")) {
    $('#headshot').html('<img src="http://www.kieferslaton.com/wp-content/uploads/2015/04/Headshot1.png" alt="headshot">');
}
});

Answer 3

您是否在标题部分中包含了jQuery库？有些时候$ symbol可能会在wordpress中发生冲突，在用这种方式初始化jQuery时编写完整的jQuery术语：

jQuery(document).ready(function(){
 if($('body').hasClass("home")) {
 $('#headshot').html('<img src="http://www.kieferslaton.com/wp-content/uploads/2015/04/Headshot1.png" alt="headshot">');
 }
});

JQuery：根据正文中的类更改页面上的图像

3 个答案: