时间戳

首页 > 解决方案 > 从 jQuery 到原生 javascript

javascript - 从 jQuery 到原生 javascript

问题描述

我有这段使用 jQuery 的代码，我希望它是一个普通的 javascript。

我使用了自我可执行功能并摆脱了$. 好吧，一旦我摆脱$了匿名函数之前的第一个并用香草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();
})();

标签： javascriptjquery

解决方案

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

还在依赖 jQuery 的时候重写 jQuery 有什么意义？

到目前为止没有访问 HTML 的结果

  1. jQuery 也不起作用 - .size 在 jQuery 3.0 中已被删除。 请改用 .length 属性。翻译为document.querySelectorAll("#content h1").length-香草没有has
  2. 您的(function() {意思是您必须在文档之后添加 JS。而是使用window.addEventListener("load",function() {
  3. 附加不是香草
  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>

推荐阅读