从jQuery到香草爪哇脚本
我有一大块代码正在使用jQuery，我希望它是一个普通的javascript。
我使用了自我可执行的功能并摆脱了.好吧，一旦我摆脱了匿名函数之前的第一个，并在vanilla JS中重写它，它就会停止工作......$$
$(function() {
$("#toc").append("<div id='generated-toc'></div>");
$("#generated-toc").tocify({
extendPage: true,
context: "#content",
highlightOnScroll: true,
hideEffect: "slideUp",
hashGenerator: function(text, element) {
return $(element).attr("id");
},
smoothScroll: false,
theme: "none",
selectors: $("#content").has("h1").size() > 0 ? "h1,h2,h3,h4,h5" : "h2,h3,h4,h5",
ignoreSelector: ".discrete"
});
var handleTocOnResize = function() {
if ($(document).width() < 768) {
$("#generated-toc").hide();
$(".sectlevel0").show();
$(".sectlevel1").show();
} else {
$("#generated-toc").show();
$(".sectlevel0").hide();
$(".sectlevel1").hide();
}
}
$(window).resize(handleTocOnResize);
handleTocOnResize();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
展开代码段
所以我这样写...但是由于某种原因，它不起作用...
(function() {
document.getElementById("toc").append("<div id='generated-toc'></div>");
document.getElementById("generated-toc").tocify({
extendPage: true,
context: "#content",
highlightOnScroll: true,
hideEffect: "slideUp",
hashGenerator: function(text, element) {
return element.attr("id");
},
smoothScroll: false,
theme: "none",
selectors: document.getElementById("content").has("h1").size() > 0 ? "h1,h2,h3,h4,h5" : "h2,h3,h4,h5",
ignoreSelector: ".discrete"
});
不负相思意1回答
-
蛊毒传说
注意：我不得不降级jQuery以匹配托西菲当你仍然依赖j查询时，重写jQuery有什么意义？到目前为止无法访问 HTML 的调查结果j 查询也不起作用 - .大小已在 jQuery 3.0 中删除。请改用 .length 属性。翻译成 - 香草没有document.querySelectorAll("#content h1").lengthhas您的方式是您必须在文档后添加JS。而是使用(function() {window.addEventListener("load",function() {附加不是香草element.attr不是香草。 或者只是element.getAttribute("id")element.idshow/hide不是香草。您需要 OR 使用媒体查询或设置属性classList.toggle("hide")hiddenelement.resize不是香草。 是或window.addEventListener("resize", handleTocOnResize);element.onresizeget元素ByName 在 ID 上无效，如果元素具有名称，则会返回节点列表，而名称不是 div 上的有效属性。getElementsByClassName您无法更改节点列表上的类 - 我已更改为querySelector文档宽度不是香草。window.addEventListener("load", function() { document.getElementById("toc").innerHTML += "<div id='generated-toc'></div>"; const $genToc = $("#generated-toc"); // seems it MUST be a jQuery object $genToc.tocify({ extendPage: true, context: "#content", highlightOnScroll: true, hideEffect: "slideUp", hashGenerator: function(text, element) { return element.id; }, smoothScroll: false, theme: "none", selectors: document.querySelectorAll("#content h1").length > 0 ? "h1,h2,h3,h4,h5" : "h2,h3,h4,h5", ignoreSelector: ".discrete" }); var handleTocOnResize = function() { // https://gist.github.com/joshcarr/2f861bd37c3d0df40b30 const w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth; const show = x < 768 // or use media queries // $genToc[0].classList.toggle("hide", !show); document.querySelector(".sectlevel0").classList.toggle("hide", show); document.querySelector(".sectlevel0").classList.toggle("hide", show); } window.addEventListener("resize", handleTocOnResize); handleTocOnResize();});.hide { display: none}.tocify-header { font-style: italic;}.tocify-subheader { font-style: normal; font-size: 90%;}.tocify ul { margin: 0; }.tocify-focus { color: #7a2518; background-color: rgba(0, 0, 0, 0.1);}.tocify-focus > a { color: #7a2518; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tocify/1.9.0/javascripts/jquery.tocify.min.js"></script><div id="content"> <h1>Toc</h1> <p class="sectlevel0">Level 0</p> <p class="sectlevel1">Level 1</p></div><div id="toc"></div>j查询测试版本，看看我们是否可以使原始代码工作const handleTocOnResize = function() { const show = $(document).width() < 768; $("#generated-toc").toggle(!show); $(".sectlevel0").toggle(show); $(".sectlevel1").toggle(show);};$(function() { $("#toc").append("<div id='generated-toc'></div>"); $("#generated-toc").tocify({ extendPage: true, context: "#content", highlightOnScroll: true, hideEffect: "slideUp", hashGenerator: function(text, element) { return $(element).attr("id"); }, smoothScroll: false, theme: "none", selectors: $("#content h1").length > 0 ? "h1,h2,h3,h4,h5" : "h2,h3,h4,h5", ignoreSelector: ".discrete" }); $(window).on("resize", handleTocOnResize); handleTocOnResize();});.hide { display: none}.tocify-header { font-style: italic;}.tocify-subheader { font-style: normal; font-size: 90%;}.tocify ul { margin: 0;}.tocify-focus { color: #7a2518; background-color: rgba(0, 0, 0, 0.1);}.tocify-focus>a { color: #7a2518;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tocify/1.9.0/javascripts/jquery.tocify.min.js"></script><div id="content"> <h1>Toc</h1> <p class="sectlevel0">Level 0</p> <p class="sectlevel1">Level 1</p></div><div id="toc"></div>
随时随地看视频慕课网APP
相关分类
JavaScript