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">');
 }
});