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>时不在页面中。

您需要执行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>

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

有关jQuery api here的更多信息。

如何在脚本中调用脚本

1 个答案: