jQuery/JavaScript：在同一页面上触发单击功能

我正在开发的一个网站在每一页的页脚都有一个链接列表。这些链接附加了锚定，如下所示：

<ul>
    <li class="lines exp"><a href="services.html#sa">Service A</a></li>
    <li class="lines exp"><a href="services.html#sb">Service B</a></li>
    <li class="lines exp"><a href="services.html#sc">Service C</a></li>
</ul>

在这些链接的“services.html”目标页面上，有一系列切换样式div，每个div对应于上述锚定链接，如下所示：

<div id="sa" class="toggle-trigger">
    <h3 class="services-title">
        <a class="toggle-text">Service A</a>
    </h3>
</div>
<div class="toggle-container">
    <p>Lorem ipsum sit dolorem.</p>
</div>
<div id="sb" class="toggle-trigger">
    <h3 class="services-title">
        <a class="toggle-text">Service B</a>
    </h3>
</div>
<div class="toggle-container">
    <p>Lorem ipsum sit dolorem.</p>
</div>
<div id="sc" class="toggle-trigger">
    <h3 class="services-title">
        <a class="toggle-text">Service C</a>
    </h3>
</div>
<div class="toggle-container">
    <p>Lorem ipsum sit dolorem.</p>
</div>

服务A
Lorem ipsum sit dolorem

服务B
Lorem ipsum sit dolorem

服务C
Lorem ipsum sit dolorem

最终目标是让页脚链接通过模拟的点击事件激活其目标“toggle trigger”div，这将在加载“services.html”页面后切换打开相关的“toggle container”div

为此，我在正文末尾的“services.html”中添加了以下JavaScript/jQuery，因为它应该只在页面准备好后启动：

<script type="text/javascript">
    $( document ).ready(function() {
        var target = document.URL;
        var regex = /services\.html#[a-z]{2}$/;
        var result = regex.exec(target);
        console.log("Target / Regex / Result: " + target + " / " + regex + " / " + result);
        if (result) {
            var divID = /#[a-z]{2}/.exec(result);
            console.log("divID: " + divID[0]);
            $(divID[0]).delay(1000).trigger('click');
        }
    });
    $(".exp").click(function() {
        var target = window.location.hash;
        console.log("Target: " + target);
        $(target).delay(1000).trigger('click');
    });
</script>

$（文档）.ready（函数（）{
var target=document.URL；
var regex=/services\.html#[a-z]{2}$/；
var result=regex.exec（目标）；
log（“Target/Regex/Result:+Target+”/“+Regex+”/“+Result”）；
如果（结果）{
var divID=/#[a-z]{2}/.exec（结果）；
log（“divID:+divID[0]）；
$（divID[0]）.delay（1000）.trigger（'click'）；
}
});
$（“.exp”）。单击（函数（）{
var target=window.location.hash；
console.log（“目标：+Target”）；
$（目标）.delay（1000）.trigger（'click'）；
});

我添加了第二个函数，因为在同一页面中单击锚定链接时，第一个函数中的

result

变量始终为空

目前，这正是我在其他网站页面上单击页脚链接时所希望的方式。但是，当我已经在“services.html”页面上并单击同一页面上的一个页脚链接时，它在我第一次单击时不起作用，而是在第二次单击锚定链接时起作用

当然，无论在哪个页面上单击页脚链接，所需的行为都是相同的

---

我做错了什么？

在我看来。。。当您已经在services.html页面上时，某些操作会出现问题。这可能是href=“services.html#sa”。虽然我不知道到底是什么地方出了问题，但我建议以不同的方式检索您的“#锚”

差不多

$(".exp").click(function(){
  $a = $(this).find("a").first() ;
  href = $a.attr('href') ;
  // parse the href to retrieve #anchor
}) ;

---

这样，你就不会依赖于窗口。位置。。。当您已经在services.html上时，它可能会表现不好。

侧注：

$（document）.ready（function（）{}）别名
$（函数（）{}）
完全满足您的需要：一旦HTML结构完成加载，它就会运行函数。不需要再把它放在身体的末端了。啊，是的，你是对的。。。然而，由于其他原因，在这个站点上，所有脚本都加载在正文的末尾，包括jQuery，所以上面的脚本也必须是。我假设您的管理部门不希望在加载实际网站之前创建不必要的JavaScript开销，例如，在使用社交网络API时，这是一件合理的事情。。。考虑到你所说的代码在其他页面上工作。。。我敢肯定，问题的根源在于你的观点是一致的。这意味着问题要么在$document.ready中出错，要么在单击处理程序中。。。您是否检查了第一次单击时发生的具体情况？可能有一部分代码在工作。。。您可以找到调试中的问题所在。是的，没错。当从另一个页面到达时，它可以正常工作，但当目标页面是当前页面时，它不能正常工作。似乎正在发生的是，对于第二个函数，
target
变量没有在第一次单击时填充。在随后的所有单击中，它都会被填充。我还不明白为什么会这样。你读过整个问题了吗？他清楚地指出，他的代码放在他的身体标签的末尾。因此，将单击事件绑定到不存在的
.ext
类化元素没有问题。（编辑：现在有了你的编辑，解决这个问题听起来更合理。）他似乎“加载”了一页。在这种情况下，可以有新的DOM元素。虽然我不确定我是否理解了这个机制，但我可能读代码太快了，有点可视化。我不确定他是否真的加载了它。我们需要询问者的反馈。但是由于他说它在第二次点击时就可以工作，我怀疑他是否执行了这样的请求。是的，我也不确定。该页面不是通过AJAX加载的。本质上，问题在于，在第二个函数中，当用户已经在“services.html”页面上时，第一次单击一个锚定页脚链接时，
target
没有被赋值。在随后的单击中，它将被填充。非常奇怪。。。。