Javascript 自编toc jQuery函数：跳转到链接目标并显示相应的元素

我为class=faqQuestion的元素动态生成toc。
答案位于默认情况下隐藏的class=faqAnswer元素中。
单击class=FAQ问题条目，它将显示为

$(this).next(".faqAnswer").slideToggle(300);

一切正常

我想要的：通过单击toc链接，我将跳转到目标faqQuestion元素并显示相应的faqAnweser元素

我生成toc的方式：

$(document).ready(function(){
  var url = window.location.pathname;
  $('<ol />').prependTo('#toc')
  $(".faqQuestion").each(function(i) {
    var current = $(this);
    current.attr("id", "entry" + i);
    $("#toc ol").append("<li class=\"faqToc\"><a id='link" + i + "' href='" + url + "#entry" +
      i + "' entry='" + current.attr("tagName") + "'>" + 
      current.html() + "</a></li>");
  });

我的问题是——至少我认为是这样——所以我尝试了类似的方法——结果是“未定义”

尝试attr而不是prop也会返回“未定义”

你能指出我的问题吗

我正在努力改进我的Javascript和jQuery技术，所以我不想使用toc插件

更新：HTML如下所示：

<div id="toc">
<ol>
<li class="faqToc">
<a href="/faq/#entry0">...</a>
</li>
<li class="faqToc">
<a href="/faq/#entry1">...</a>
</li>
</div>


<p id="entry0" class="faqQuestion">...</p>
<div class="faqAnswer" style="display: none;">...</div>

<p id="entry1" class="faqQuestion">...</p>
<div class="faqAnswer" style="display: none;">...</div>

...

...

一个非常简单的方法是使用

index（）

方法，因为TOC元素和问答元素之间的关系是1:1

$(".faqToc").click(function(event){
  var index=$(this).index(); /* zero based index position of element within it's siblings*/
 /* toggle answer element with same index */
  $(".faqAnswer").eq(index).slideToggle(300);
});

---

jQuery API参考：

标记名

是一个属性而不是属性，您应该使用

prop

方法，而不是

attr

或

此.tagName

。对于动态生成的元素，您应该委派事件。为什么需要标记名来创建内部页面链接？

next（）

不起作用，因为应答元素不是链接的同级元素。提供您在post中编辑的html结构，或者更好地在jsfiddle.netb中创建一个演示，但您能否解释为什么var url=$（this.prop（“href”）；警报（url）；是否仍未定义？是。。您正在将单击处理程序分配给具有href的

LI

而不是

A

。您需要

$（“.faqToc a”）。单击..

<div id="toc">
<ol>
<li class="faqToc">
<a href="/faq/#entry0">...</a>
</li>
<li class="faqToc">
<a href="/faq/#entry1">...</a>
</li>
</div>


<p id="entry0" class="faqQuestion">...</p>
<div class="faqAnswer" style="display: none;">...</div>

<p id="entry1" class="faqQuestion">...</p>
<div class="faqAnswer" style="display: none;">...</div>

$(".faqToc").click(function(event){
  var index=$(this).index(); /* zero based index position of element within it's siblings*/
 /* toggle answer element with same index */
  $(".faqAnswer").eq(index).slideToggle(300);
});