我的javascript函數只有在我刷新頁面后才能工作

Question

我知道關於同樣的問題存在多個問題，但我找不到任何答案。 我正在使用javascript來激活懸停在其他元素上。 javascript代碼工作正常，但只有在我刷新頁面后才能工作，CTRL + R.如果我正常訪問頁面，它將無法正常工作。

JS：

  $(function() { $('#faqBg').hover(function() { $('#spanContainer').css('background', 'rgb(0, 0, 0, 0.6'); }, function() { // on mouseout, reset the background colour $('#spanContainer').css('background', ''); }); }); 

 .image-wrapper { position: relative; } #faqBg { background: linear-gradient(-45deg,rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://images.pexels.com/photos/1239162/pexels-photo-1239162.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500); padding: 60px 0px; display: block; background-size: cover; background-repeat: no-repeat; } #spanContainer { color: #fff; width: 100%; text-align: center; padding: 20px 0px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="image-wrapper"> <div id="faqBg"> <div id="spanContainer"> Hover trigger </div> </div> </div> 

這是我使用的代碼，在這里，當我這樣做一切似乎都很好，但在網站上它沒有。 我嘗試添加$(document).ready和$(document).load但它沒有用。

Answer 1

這是因為緩存而發生的。

在加載時為你的javascript文件添加版本：

<script src="file.js?v=1"></script>在要查看的每個更改上增加v參數。 如果您的頁面是動態生成的，則可以設置為v時間戳值，具體取決於您使用的后端語言。

另一種解決方案是使用這些元標記：

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

Answer 2

改用CSS：

 #faqBg:hover #spanContainer { 
       background: rgba(0,0,0,0.6);
 }

Answer 3

代碼中的javascript函數包括樣式更改，這將在硬刷新后反映出來。

您能否確認是否有任何其他JS功能（沒有樣式更改的功能）與您提到的相同。