無法獲得簡單的jquery腳本在WordPress頁面上工作

我正嘗試在我正在開發的WordPress網站上使用jQuery插件HCaptions，這樣當鼠標懸停在圖像上時，圖像上會出現一些信息。我已經能夠在主題的function-extras.php文件中排隊腳本，並且我可以看到腳本已經與所有其他腳本一起加載，但是腳本沒有按照需要處理懸停事件。在這個階段，我只是複製和粘貼從HCaptions庫建議的默認代碼，但有參考我自己的相關圖片如下：無法獲得簡單的jquery腳本在WordPress頁面上工作

<a href="#myToggle" class="panel"> 
    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/test-feature-image.jpg" /> 
</a> 
<div id="myToggle" class="cap-overlay hide"> 
    <h5>Cupcakes</h5> 
    <div class="content"> 
     Name: cupcakes.png<br /> 
     Photography: Ryun Shofner<br /> 
     <a href="javascript:void(0)" class="button small"><i class="icon-edit"></i> Edit</a> 
     <a href="javascript:void(0)" class="button small"><i class="icon-remove"></i> Delete</a> 
    </div> 
</div>

我工作的網站可以在www.heartinhand.com.au訪問。任何建議不勝感激。

來源

2015-04-23 oldo.nicho

你有一個腳本錯誤的位置：

$(window).load(function(){ 
    $('.hcaption').hcaptions(); 
});

嘗試將其更改爲這樣：

jQuery(document).ready(function($){ 
    $('.hcaption').hcaptions(); 
});

這是因爲包含在WordPress的jQuery庫設置爲「noconflict」模式compatibility reasons。

你的形象也需要hcaption類和數據屬性，像這樣：

<a href="#" data-attribute="#myToggle" class="hcaption panel">

來源

2015-04-23 04:05:49 Mike

乾杯@Mike，我現在可以看到的是，當我將鼠標懸停在圖像，一些不同造型的參數正在改變' ＃myToggle'，這太好了。然而，隱藏的'div'還沒有被揭示。還有什麼建議？謝謝！ –

在你的bootstrap.min.css中，從.hide類中移除！important標記（display：none而不是display：none！important） – Mike

你是一個嚮導！ –

無法獲得簡單的jquery腳本在WordPress頁面上工作

回答

相關問題