未捕获的 ReferenceError: $$ 未定义

Sti*_*cky 2 javascript css jquery svg

我正在尝试以编程方式创建一个饼图,希望将其转换为可重用的 React 组件。基本上我需要一个可点击的饼图,每个切片在点击时扩展成一个完整的饼图。我正在尝试按照本教程制作饼图,在底部,我尝试测试一段JS。我最终得到Uncaught Reference Error: $$ is not defined.了错误消息的屏幕截图。

在此处输入图片说明

我的理解是这不是jQuery,而只是 Vanilla JS。我不确定这是否属实。我通过CDN导入了jQuery,但仍然出现相同的错误。我读了这篇SO post,我在想这只是一种变量名表示法。$$

这是我的代码index.html,没有任何开创性。

<body>
  <div class="pie">20%</div>
  <div class="pie">60%</div>
  <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
  <script type="text/javascript">
    $$('.pie').forEach(function(pie) {
      var p = parseFloat(pie.textContent);
      var NS = "http://www.w3.org/2000/svg";
      var svg = document.createElementNS(NS, "svg");
      var circle = document.createElementNS(NS, "circle");
      var title = document.createElementNS(NS, "title");
      circle.setAttribute("r", 16);
      circle.setAttribute("cx", 16);
      circle.setAttribute("cy", 16);
      circle.setAttribute("stroke-dasharray", p + " 100");
      svg.setAttribute("viewBox", "0 0 32 32");
      title.textContent = pie.textContent;
      pie.textContent = '';
      svg.appendChild(title);
      svg.appendChild(circle);
      pie.appendChild(svg);
    });
  </script>
</body>
Run Code Online (Sandbox Code Playgroud)

导致错误的原因是什么?我误会了吗?我遵循的教程是否过时/错误?谢谢!

phi*_*yoo 6

包括以下这些:

function $$(selector, context) {
  context = context || document;
  var elements = context.querySelectorAll(selector);
  return Array.prototype.slice.call(elements);
}
Run Code Online (Sandbox Code Playgroud)

根据作者 Lea Verou 的说法,她提到:

在书中,介绍中给出了 $$() 的定义,但由于这是摘录,因此不包括在内。