從 jQuery 到普通 javascript

Question

我有這段代碼正在使用 jQuery，我希望它是一個普通的 javascript。

我使用了自我可執行 function 並擺脫了$ 。 好吧，一旦我擺脫匿名 function 之前的第一個$並用香草 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" }); var handleTocOnResize = function() { if (document.width() < 768) { document.getElementsByName("generated-toc").hide(); document.getElementsByClassName("sectlevel0").show(); document.getElementsByClassName("sectlevel1").show(); } else { document.getElementById("generated-toc").show(); document.getElementsByClassName("sectlevel0").hide(); document.getElementsByClassName("sectlevel1").hide(); } } window.resize(handleTocOnResize); handleTocOnResize(); })();

Answer 1

注意：我不得不降級 jQuery 以匹配 tocify

當您仍然依賴 jQuery 時，重寫 jQuery 有什么意義？

迄今為止的調查結果無法訪問 HTML

1. jQuery 也不起作用 - .size 已在 jQuery 3.0 中刪除。 請改用 .length 屬性。 轉換為document.querySelectorAll("#content h1").length - vanilla 沒有has
2. 您的(function() {意味着您必須在文檔之后添加 JS。而是使用window.addEventListener("load",function() {
3. append 不是香草
4. element.attr不是香草。 element.getAttribute("id")或只是element.id
5. show / hide不是香草。 您需要classList.toggle("hide")或使用媒體查詢或設置hidden屬性
6. element.resize不是香草。 window.addEventListener("resize", handleTocOnResize); 是或element.onresize
7. getElementsByName 在 ID 上無效，如果元素具有名稱，則將返回節點列表，這不是 div 上的有效屬性。
8. getElementsByClassName您不能更改節點列表上的類 - 我更改為querySelector
9. document.width 不是普通的。

 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>

jQuery測試版看看能不能讓原代碼工作

 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>