从jQuery到香草爪哇脚本

Question

我有一大块代码正在使用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"  });

Answer 1

注意：我不得不降级jQuery以匹配托西菲

当你仍然依赖j查询时，重写jQuery有什么意义？

到目前为止无法访问 HTML 的调查结果

1. j 查询也不起作用 - .大小已在 jQuery 3.0 中删除。请改用 .length 属性。翻译成 - 香草没有document.querySelectorAll("#content h1").lengthhas

2. 您的方式是您必须在文档后添加JS。而是使用(function() {window.addEventListener("load",function() {

3. 附加不是香草

4. element.attr不是香草。 或者只是element.getAttribute("id")element.id

5. show/hide不是香草。您需要 OR 使用媒体查询或设置属性classList.toggle("hide")hidden

6. element.resize不是香草。 是或window.addEventListener("resize", handleTocOnResize);element.onresize

7. get元素ByName 在 ID 上无效，如果元素具有名称，则会返回节点列表，而名称不是 div 上的有效属性。

8. getElementsByClassName您无法更改节点列表上的类 - 我已更改为querySelector

9. 文档宽度不是香草。

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>