我的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，但它们并没有起作用。

- Freelancer Help

---

我使用Chrome [版本71.0.3578.98（官方版）（64位）] 进行测试，一切正常：https://trustmypetsitter.herokuapp.com/faq - vladwoguer

你为什么要使用JS来触发hover？为什么不直接使用CSS呢？你试过用CSS吗？ - Devashish

当你首次访问该页面时，它可以工作，但是如果您导航到其他页面然后返回常见问题页面，它将无法工作。 - Freelancer Help

你为什么要使用JavaScript来处理CSS本身就可以完美处理的事情呢？#faqBg:hover #spanContainer { /*像你的法国女友一样格式化我*/ } - misorude

@Davashish 我没有，我在 CSS 方面运气不佳，无法使其正常工作，所以我使用了 jQuery。 - Freelancer Help

@FreelancerHelp 我在下面发布了一个简单的CSS答案。尝试使用它，看看是否适用于您。如果是，请将其标记为已接受。 - Devashish

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" />

- Andrei Todorut

---

谢谢@Andrei，我尝试了但没有成功。这个应用程序正在运行React，所以可能这个答案不起作用。 - Freelancer Help

那么，你的 React 应用程序没有更新？ - Andrei Todorut

问题实际上与缓存有关。这就是为什么在强制重新加载页面时它能够正常工作。但你可以将元标签放在React的index.html中，不是吗？ - Andrei Todorut

是的，这是唯一一个出现此问题的页面，我在主页上使用了同样的JavaScript来触发悬停效果，那里一切正常。 - Freelancer Help

我添加了您提供的元标签以及?v=1，但结果还是一样的。 - Freelancer Help

Answer 2

您的代码中的 JavaScript 函数包含样式更改，这些更改将在进行硬刷新后才会反映出来。

请确认是否存在其他 JS 函数（不包含样式更改）也按照您所提到的方式运作。

- Viji Krish

Answer 3

请使用CSS代替:

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

- Devashish

---

嘿 @Devashish。是的，使用 CSS 很有帮助，现在不需要强制刷新了。谢谢!!! - Freelancer Help

很奇怪这个被标记为答案。原帖是关于一个JavaScript函数的问题，而不是如何使用CSS更改背景颜色的问题。 - Splambo