如何解决以下js索引脚本问题

Question

我有一个自动索引脚本，用于创建标题1-6的列表，尝试抓取标题的内容（<h2> ...内容... </h2>），创建标头的id标签，并将其内容抛出到id标签中。

但它有一个错误。它抓取最后一个标头的内容并将其抛出到所有标头的id标签中。

我不知道如何正确地说出这个，或者修复这个错误。我已经有一段时间了。我应该休息一下。但是，我似乎无法放手......帮助...

• jsfiddle

码：

function index() {
    var index =
        "<ul id=\"EuroTOC\" style=\"display: block;\">" +
        "<li id=\"tocid\">Table of Content <button id=\"closetoc\" onclick=\"closetoc()\">[-]</button>";

    var newLine, el, title, link, hid;

    // searches every tag you put in here
    $("h1, h2, h3, h4, h5, h6").each(function() {

        el = $(this);
        title = el.text();
        link = "#" + el.attr("id");
        id = "#" + el.text().replace(/\s/g, "");
        hid = el.text().replace(/\s/g, "");


// -----\/ Not Working properly \/----- 

//  Takes the last header id="last"
// applys that on all headers : h1-6

    var select = $('h1');
    select.attr('id', ""+ hid + "");

    var select = $('h2');
    select.attr('id', ""+ hid + "");

    var select = $('h3');
    select.attr('id', ""+ hid + "");

    var select = $('h4');
    select.attr('id', ""+ hid + "");

    var select = $('h5');
    select.attr('id', ""+ hid + "");

    var select = $('h6');
    select.attr('id', ""+ hid + "");

    // var select = $('h1, h2, h3, h4, h5, h6');
    // select.attr('id', ""+ title +"");

// ------^ Not Working properly ^-------

    // Works Fine:

        newLine =
            "<li>\n" +
                "<a href='" + id + "' title='" + title + "' >" + title +
            "</a>\n" +
            "</li>\n";

        index += newLine;

    });


    index +=
        "</li>" +
        "</ul>";

    $("article").prepend(index);
}

输出：

<article>

<ul style="display: block;" id="EuroTOC"><li id="tocid">Table of Content <button onclick="closetoc()" id="closetoc">[-]</button></li><li>
<a title="Dynamic Table Of Content" href="#DynamicTableOfContent">Dynamic Table Of Content</a>
</li>
<li>
<a title="Jquery script" href="#Jqueryscript">Jquery script</a>
</li>
<li>
<a title="How do many licks does a giraffe?" href="#Howdomanylicksdoesagiraffe?">How do many licks does a giraffe?</a>
</li>
<li>
<a title="Which Frank is?" href="#WhichFrankis?">Which Frank is?</a>
</li>
<li>
<a title="Is fourteen enough?" href="#Isfourteenenough?">Is fourteen enough?</a>
</li>
<li>
<a title="Is a circle an oval y/n?" href="#Isacircleanovaly/n?">Is a circle an oval y/n?</a>
</li>
<li>
<a title="Many mongerals manifest mountains" href="#Manymongeralsmanifestmountains">Many mongerals manifest mountains</a>
</li>
<li>
<a title="How would you like a soda drink?" href="#Howwouldyoulikeasodadrink?">How would you like a soda drink?</a>
</li>
<li>
<a title="I would very much like a soda drink." href="#Iwouldverymuchlikeasodadrink.">I would very much like a soda drink.</a>
</li>
<li>
<a title="Please Header Script work" href="#PleaseHeaderScriptwork">Please Header Script work</a>
</li>
</ul>
      <h1 id="PleaseHeaderScriptwork">Dynamic Table Of Content</h1>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>  


      <h2 id="PleaseHeaderScriptwork">Jquery script</h2>

        <p> 
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

      <h3 id="PleaseHeaderScriptwork">How do many licks does a giraffe?</h3>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

      <h4 id="PleaseHeaderScriptwork">Which Frank is?</h4>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

      <h5 id="PleaseHeaderScriptwork">Is fourteen enough?</h5>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

      <h6 id="PleaseHeaderScriptwork">Is a circle an oval y/n?</h6>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

      <h3 id="PleaseHeaderScriptwork">Many mongerals manifest mountains</h3>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

      <h3 id="PleaseHeaderScriptwork">How would you like a soda drink?</h3>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

      <h3 id="PleaseHeaderScriptwork">I would very much like a soda drink.</h3>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

      <h3 id="PleaseHeaderScriptwork">Please Header Script work</h3>

        <p>   
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

    </article>

Answer 1

对于每个标头，您都要将hid值设置为每个标头的id属性。您对所有标题执行此操作，并且每个标题都会覆盖前一个标题，最后一个标题是唯一剩下的标题。

解决方案是更换所有＆＃34;不工作＆＃34;用这个代码：

el.attr('id', ""+ hid + "");

无需搜索该标题元素，您已经拥有它。

Answer 2

这正是你所要求的。每次循环时，您都会创建一个ID，然后将其应用于文档中的每个 h1，h2等。所以无论id设置了什么 last 都留在了所有id。

您想要做的事情是设置您正在检查的元素的id。您已经在el中引用了该元素，所以只需：

el.attr('id', hid);

Answer 3

当你做的时候

var select = $('h1');
select.attr('id', ""+ hid + "");

将id属性分配给所有h1标签，您需要在当前元素上设置属性

el.attr('id', hid);

<强>更新

我在这里重新实现代码，以防任何用途供参考。

http://jsfiddle.net/2wadx9t5/

Answer 4

如果需要，请更新脚本索引功能，如下所示删除注释代码

function index() {
    var index =
        "<ul id=\"EuroTOC\" style=\"display: block;\">" +
        "<li id=\"tocid\">Table of Content <button id=\"closetoc\" onclick=\"closetoc()\">[-]</button>";

    var newLine, el, title, link, hid;

    // searches every tag you put in here
    $("h1, h2, h3, h4, h5, h6").each(function() {

        el = $(this);
        title = el.text();
        id = el.text().replace(/\s/g, "");      
        el.attr('id', ""+ id +"");
        id = '#' + id;
        link = "#" + el.attr("id");
        hid = el.text().replace(/\s/g, "");

// -----\/ Not Working properly \/----- 

//  Takes the last header id="last"
// applys that on all headers : h1-6

    /*var select = $('h1');
    select.attr('id', ""+ hid + "");

    var select = $('h2');
    select.attr('id', ""+ hid + "");

    var select = $('h3');
    select.attr('id', ""+ hid + "");

    var select = $('h4');
    select.attr('id', ""+ hid + "");

    var select = $('h5');
    select.attr('id', ""+ hid + "");

    var select = $('h6');
    select.attr('id', ""+ hid + "");*/

    /*var select = $('h1, h2, h3, h4, h5, h6');
    select.attr('id', ""+ id +"");*/

// ------^ Not Working properly ^-------

    // Works Fine:

        newLine =
            "<li>\n" +
                "<a href='" + id + "' title='" + title + "' >" + title +
            "</a>\n" +
            "</li>\n";

        index += newLine;

    });


    index +=
        "</li>" +
        "</ul>";

    $("article").prepend(index);




$('#toc').attr('style', 'display: none;');


}

Answer 5

以下是jsfiddle的示例。

我使用:header选择器来排队所有标题。你拥有它的方式，首先是h1，然后是h2，依此类推。

jQuery(document).ready(function($){

    $(document).on('click', '#toc', function(event){
        $('#EuroTOC').toggle();
    });

    // searches every tag you put in here
    $("article :header").each(function(index) {
        $(this).attr('id', 'toc'+index);
        var li = $('<li></li>');
        var a = $('<a></a>');
        a.html($(this).html());
        a.attr('href', '#toc'+index);
        li.html(a);
        $('#EuroTOC').append(li);
    });    
});

我也改变了HTML

<button id="toc" title="Table Of Contents">[+]</button>
<ul id="EuroTOC"></ul>
    <article>
      <h1>Dynamic Table Of Content</h1>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>  


      <h2>Jquery script</h2>

        <p> 
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

      <h3>How do many licks does a giraffe?</h3>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

      <h4>Which Frank is?</h4>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

      <h5>Is fourteen enough?</h5>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

      <h6>Is a circle an oval y/n?</h6>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

      <h3>Many mongerals manifest mountains</h3>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

      <h3>How would you like a soda drink?</h3>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

      <h3>I would very much like a soda drink.</h3>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

      <h3>Please Header Script work</h3>

        <p>   
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

    </article>

这是CSS

#EuroTOC {
    display:none;
}