腳本在Codepen上正常工作，但不在WP網站上

我有這個codepen，它工作正常，但是當我將它加載到我的Wordpress site上時，它似乎無法正常運行。腳本在Codepen上正常工作，但不在WP網站上

這裏是JS代碼：

jQuery(document).ready(function() { 
(function(jQuery, win) { 
    jQuery.fn.inViewport = function(cb) { 
     return this.each(function(i, el) { 
      function visPx() { 
       var H = jQuery(this).height(), 
        r = el.getBoundingClientRect(), 
        t = r.top, 
        b = r.bottom; 
       return cb.call(el, Math.max(0, t > 0 ? H - t : b < H ? b : H)); 
      } 
      visPx(); 
      jQuery(win).on("resize scroll", visPx); 
     }); 
    }; 
})(jQuery, window); 

jQuery(".kk-img").inViewport(function(px) { 
    if (px) jQuery(this).addClass("vsb"); 
    jQuery(this).toggleClass("vsb", !!px); 
}); 

jQuery(".kk-rec").inViewport(function(px) { 
    if (px) jQuery(this).addClass("vsb"); 
    jQuery(this).toggleClass("vsb", !!px); 
}); 
});

而且，開發工具的控制檯顯示沒有錯誤。任何人都有一個想法，我應該在哪裏尋找解決這個問題？

謝謝您的時間。

---一些更多的澄清---

的JS代碼的某些元素添加一個類時，這些都在視口中可見。然後這些元素有一些轉換，以便它們看起來很流暢（你可以檢查代碼鏈接上的代碼是什麼）。

在我的網站上，它是「不工作」，因爲addClass沒有添加到元素上。我不知道爲什麼..

來源

2017-05-05 dominotrix

*它似乎不能正確運行*你能更具體嗎 –

你排隊這個腳本嗎？ – LebCit

我的意思是它沒有做它應該做的事情：當元素在視口上可見時動畫元素。雖然代碼在CodePen上運行良好，但動畫在我的網站上完全沒有運行。 – dominotrix

您的main.js根本沒有加載！
您可以查看代碼的來源，Ctrl + U或右鍵單擊並查看頁面源代碼。
其他JS腳本已加載。
main.js的路徑是/js，我想你必須把它放在/assets/js
再看看你的enqueue函數。你可以把它粘貼在這裏。
SYA

來源

2017-05-05 06:49:13 LebCit

它被加載，爲什麼你否則說？我在網上發現了另一個腳本，用於「可見時有動畫」，現在它正確運行。沒有想到爲什麼以前的腳本不工作。 – dominotrix

轉到您的[站點]（https://artware.gr/）並查看代碼'view-source：https：// artware.gr /'的源代碼。按Ctrl + F並搜索你的'main.js' – LebCit

你犯了一個錯誤的隊友。這不是我正在談論的網站。它是這樣的：https：//artware.gr/thermoplastiki/ – dominotrix

腳本在Codepen上正常工作，但不在WP網站上

回答

相關問題