Question

我正在尝试以编程方式创建饼图，希望将其转换为可重用的React组件。基本上我需要一个可点击的饼图，每个切片在单击时会扩展为整个饼图。我正在尝试关注this tutorial制作饼图，在底部，我有一块 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>

导致错误的原因是什么？我误会了吗？我正在关注的教程是否过时/错误？谢谢！

Answer 1

包括以下内容：

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

根据作者Lea Verou的说法，她提到：

书中的
在引言中给出了$$（）的定义，但由于这是摘录，因此不包括。

Answer 2

您是否尝试在$$('.pie')上使用单个$而不是double $$，因此您的代码如$('.pie')？

并检查您是否已经包含jQuery

这是有用的链接

http://www.w3schools.com/jquery/jquery_ref_selectors.asp

https://api.jquery.com/

未捕获的ReferenceError：未定义$$

2 个答案: