为了账号安全,请及时绑定邮箱和手机立即绑定

从jQuery到香草爪哇脚本

从jQuery到香草爪哇脚本

不负相思意 2022-09-23 21:30:06

我有一大块代码正在使用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 回答

?
蛊毒传说

TA贡献1552条经验 获得超3个赞

注意:我不得不降级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>


查看完整回答
反对 回复 6天前
  • 1 回答
  • 0 关注
  • 7 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信