如何对以下 js 索引脚本进行故障排除
How to troubleshoot the following js index script
我有一个自动索引脚本，它创建一个标题 1-6 的列表，并尝试抓取标头的内容（ <h2> ...内容。。。 </h2> ），为标头创建一个 id 标记，并将其内容抛出在 id 标记中。
但它有一个错误。它抓取最后一个标头的内容，并将其抛在所有标头的 id 标记中。
我不知道如何正确措辞或修复此错误。我已经有一段时间了。我应该休息一下。但是，我似乎不能放手...帮助。。。
- 斯菲德尔
代码：
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>
对于每个标头，您将hid值设置为每个标头的 id 属性中。您可以对所有标头执行此操作，每个标头都会覆盖前一个标头，最后一个标头是末尾唯一剩余的标头。
解决方案是将所有"不起作用"的代码替换为以下内容：
el.attr('id', ""+ hid + "");
无需搜索该标头元素，您已经拥有它。
它正在做你要求它做的事情。每次通过循环时，您都会创建一个 id，然后将其应用于文档中的每个h1、h2等。因此，无论最后设置什么 id，都会保留在所有这些上。
您要做的是设置您现在正在检查的元素的id。您已经在 el 中引用了该元素，所以只是：
el.attr('id', hid);
如果需要，请按如下方式更新脚本索引函数，删除注释的代码
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;');
}
当你在做的时候
var select = $('h1');
select.attr('id', ""+ hid + "");
将 ID 属性分配给所有 H1 标签，其中您需要在当前元素上设置属性
el.attr('id', hid);
更新：
我尝试在这里重新实现代码，以防它有任何参考用途。
http://jsfiddle.net/2wadx9t5/
这是一个示例的 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;
}
相关文章：
- 当包含另一个asp文件时，是否也包含所有引用的样式和脚本页面
- 借助asp.net验证或java脚本对多个文本进行验证
- chrome扩展:尽管运行了at:documentidle，js脚本还是过早启动
- Java脚本时间添加
- 不显示带有本地json文件数据的谷歌地图脚本
- JQuery添加元素需要在我的js之前再次添加JQuery脚本
- 从远程脚本获取用户IP
- 如何根据时间运行不同的脚本
- 如何将字符串值从php页面发送到java脚本页面
- 使用谷歌应用程序脚本将服务器端数据表返回到客户端
- 可以设置“;文件名"发生错误时显示的内联脚本标记的
- 当脚本由system.js加载时，如何要求('electron'）
- HTML标记在脚本标记中工作
- 是否可以控制获取哪些Google地图脚本(JavaScript API）
- javascript.点击隐藏事件故障
- Greasemonkey 可防止脚本在 Inernet 出现故障时卡住
- 如何对以下 js 索引脚本进行故障排除
- 冲突的脚本:当我将fancyBox脚本添加到html文档时，图像滑块出现故障
- 基本的JavaScript鼠标Over和mouseOut脚本出现故障
- 运行故障&纱线运行&;在package.json中的脚本对象上
