javascript - 如何在脚本中调用脚本

Question

我目前正在研究这个 responsive gallery content它正在按照我想要的方式工作。但是，我需要让其中一个内容在单击某个选择时发生内容更改 This is the working code of the content change .在检查它在单独的文件上工作正常后，我将它添加到主要的响应式图库内容中。

是因为我放置了内容更改脚本吗？我尝试将它放在下面的主脚本中，但没有用。我尝试创建自己的脚本标签并将其放在最后但结果相同。现在，我尝试将它添加到 head 标签中，但它仍然不起作用。有人可以帮帮我T^T

请点击 atkinsons 菜单，因为这是我插入内容更改的地方

我指的是负责选择适当页面以更改内容的脚本标记。

<!--Content Change Script-->
  <script type="text/javascript">
    $(document).ready(function() {
      $("a").click(function() {
        var id = $(this).attr("data-id"); // Using a custom attribute.
        $("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them.
        $(".div" + id).show(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
      });
    });
  </script>

问题 在 Atkinsons 页面下，每当我点击选择内容时，内容都没有改变。在第一个链接下，结果应该类似于 this每当我单击选择时，标题和页面都应该更改。

变化 我已经应用了下面第一个答案中的代码建议。它现在在单击选择时更改标题，但并非所有部分都是可单击的。我在 codepen 和 localhost 中应用了相同的更改，但它产生了不同的可点击链接，但这些链接不起作用。随机字母不起作用取决于窗口的大小。该段也没有显示

Answer 1

您的脚本无法正常工作，因为您的 <a>当您尝试将事件绑定(bind)到它们时不在页面中。

你需要做 delegate是这样的。

<script type="text/javascript">
    $(document).ready(function() {
      $(document).on("click", "a", function() {
        var id = $(this).attr("data-id"); // Using a custom attribute.
        $("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them.
        $(".div" + id).show(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
      });
    });
  </script>

这会将事件绑定(bind)到文档，该文档从一开始就在页面中。

更多关于 jQuery API here .