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

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就绪时触发的函数中：

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

更多信息

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库？ 另外有时候$符号可能在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">');
 }
});