这个JavaScript文件在一个页面上运行，但在其他页面上不运行，这是为什么？

我有一个Jekyll博客，并在每个帖子页面底部实现了相邻帖子（下一篇和上一篇）之间的导航。我编写了一个快速脚本，在每个图像上添加悬停效果

以下是脚本：

$(document).ready(function() {
    // animate home page post links on hover
    $('.post-summary').hover(
        function() {
            $(this).animate({opacity: 1}, 100);
        },
        function() {
            $(this).animate({opacity: .7}, 100);
        }
    );
});  

它可以在主页上正常工作，但当您转到主页时，它根本不工作，即使它仍然包含在页面源代码中

这是为什么？

您的实际\u layouts/post.html布局为布局布局为布局

事实上，这是一个布局问题

实际上，您的布局不会加载脚本

更改

版面的封面：“默认”

和已删除的

包括页眉

和

包括页脚

您的布局现在如下所示：

---
layout: default
---

<article class="article">
  <section class="article-cover">
    <img class="header-image" src="{{ page.headerImage }}" alt="{{ page.headerAlt }}">
    <span>
      <h3 class="post-id">{{ page.postId }}:</h3>
      <h1 class="post-title">{{ page.title }}</h1>
      <h4 class="post-date">{{ page.date | date: "%Y.%m.%d" }}</h4>
    </span>
  </section>

  <div class="content-wrapper">
    <section class="article-body center" itemprop="articleBody">
      {{ content }}
    </section>
  </div>
</article>

{% if page.next %}
  {% assign next = page.next %}
{% endif %}
{% if page.previous %}
  {% assign previous = page.previous %}
{% endif %}

<div class="next-previous">
  <ul class="adjacent-list">
    {% if page.next %}
    <li>
      <a class="post-link" href="{{ next.url | absolute_url }}">
        <div class="post-summary"
          style="background-image: url({{ next.headerImage }}); background-position: center; opacity: .7;">

          <div class="title-container">
            <h3 >{{ next.postId }}:</h3>
            <h1>{{ next.title }}</h1>
          </div>

        </div>
      </a>
    </li>
    {% endif %}

    {% if page.previous %}
    <li>
      <a class="post-link" href="{{ previous.url | absolute_url }}">
        <div class="post-summary"
          style="background-image: url({{ previous.headerImage }}); background-position: center; opacity: .7;">

          <div class="title-container">
            <h3 >{{ previous.postId }}:</h3>
            <h1>{{ previous.title }}</h1>
          </div>

        </div>
      </a>
    </li>
    {% endif %}
  </ul>
</div>

---
布局：默认值
---

{%endif%}
{%if page.previous%}


{%endif%}

您的实际\u布局/post.html布局为布局布局为布局

事实上，这是一个布局问题

实际上，您的布局不会加载脚本

更改

版面的封面：“默认”

和已删除的

包括页眉

和

包括页脚

您的布局现在如下所示：

---
layout: default
---

<article class="article">
  <section class="article-cover">
    <img class="header-image" src="{{ page.headerImage }}" alt="{{ page.headerAlt }}">
    <span>
      <h3 class="post-id">{{ page.postId }}:</h3>
      <h1 class="post-title">{{ page.title }}</h1>
      <h4 class="post-date">{{ page.date | date: "%Y.%m.%d" }}</h4>
    </span>
  </section>

  <div class="content-wrapper">
    <section class="article-body center" itemprop="articleBody">
      {{ content }}
    </section>
  </div>
</article>

{% if page.next %}
  {% assign next = page.next %}
{% endif %}
{% if page.previous %}
  {% assign previous = page.previous %}
{% endif %}

<div class="next-previous">
  <ul class="adjacent-list">
    {% if page.next %}
    <li>
      <a class="post-link" href="{{ next.url | absolute_url }}">
        <div class="post-summary"
          style="background-image: url({{ next.headerImage }}); background-position: center; opacity: .7;">

          <div class="title-container">
            <h3 >{{ next.postId }}:</h3>
            <h1>{{ next.title }}</h1>
          </div>

        </div>
      </a>
    </li>
    {% endif %}

    {% if page.previous %}
    <li>
      <a class="post-link" href="{{ previous.url | absolute_url }}">
        <div class="post-summary"
          style="background-image: url({{ previous.headerImage }}); background-position: center; opacity: .7;">

          <div class="title-container">
            <h3 >{{ previous.postId }}:</h3>
            <h1>{{ previous.title }}</h1>
          </div>

        </div>
      </a>
    </li>
    {% endif %}
  </ul>
</div>

---
布局：默认值
---

{%endif%}
{%if page.previous%}


{%endif%}

转到另一个帖子页面是否涉及动态加载内容？是的，我刚刚看到了“相邻帖子之间的导航”部分。我确信它是一个复制品。@Taplar就我所知，它并没有动态加载内容。由于我使用的是Jekyll，它会为我添加到posts文件夹中的每个新帖子创建一个帖子页面。我还添加了

$（document.ready（）

尝试查看这是否是问题所在。这不能解决问题吗？只需使用CSS并删除JavaScripts“转到另一个帖子页面”是否涉及动态加载内容？是的，我刚刚看到了“相邻帖子之间的导航”部分。我确信它是一个复制品。@Taplar就我所知，它并没有动态加载内容。由于我使用的是Jekyll，它会为我添加到posts文件夹中的每个新帖子创建一个帖子页面。我还添加了

$（document.ready（）

尝试查看这是否是问题所在。这不能解决问题吗？只需使用CSS并删除JavaScript