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> 

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 в свой раздел заголовков? Также несколько раз символ $ может конфликтовать в 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">'); 
} 
});