未捕获的ReferenceError：未定义$$

Question

I'm trying to programmatically create a pie chart in hopes of turning it into a React Component to reuse. 我正在尝试以编程方式创建一个饼图，希望将其转换为可重用的React组件。 Basically I need a pie chart that is clickable and each slice expands into a whole pie when clicked. 基本上，我需要一个可单击的饼图，单击时每个切片都会扩展为整个饼图。 I'm trying to follow this tutorial to making pie charts and at the bottom, I have a piece of JS that I tried to test out. 我正在尝试按照本教程制作饼图，而在底部，我尝试了一块JS 。 I ended up getting Uncaught Reference Error: $$ is not defined. 我最终遇到了Uncaught Reference Error: $$ is not defined. Here's a screenshot of error message. 这是错误消息的屏幕截图。

My understanding is that this is not jQuery and is simply Vanilla JS. 我的理解是，这不是jQuery ，而是Vanilla JS。 I'm not sure if this is true. 我不确定这是否是真的。 I imported jQuery via a CDN and still got the same error. 我通过CDN导入了jQuery ，但仍然遇到相同的错误。 I read this SO post and I'm thinking $$ is simply a kind of variable name notation. 我读了这篇SO帖子，我认为$$只是一种变量名表示法。

This is the code I have in index.html , nothing groundbreaking. 这是我在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>

What's causing the error? 是什么导致错误？ Am I misunderstanding? 我误会了吗 Is the tutorial I'm following outdated/wrong? 我正在关注的教程过时/错误吗？ Thank you! 谢谢！

Answer 1

Include the following: 包括以下这些：

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

According to the author, Lea Verou, she mentions: 根据作者Lea Verou的说法，她提到：

in the book the definition of $$() is given in the introduction, but since this is an excerpt, it doesn't include that. 在书中，$$（）的定义在引言中给出，但是由于这是节选，因此不包含该内容。

Answer 2

From tutorial you mention in your question i got something that will help you. 从教程中您提到的问题中，我得到了可以帮助您的东西。

Also , you need to wrap your code in, 另外，您需要将 code 包装在其中，

$(function(){....});

As you mention jquery in your tags. 正如您在标签中提到的jquery。

Hope this helps. 希望这可以帮助。

Answer 3

Have you tried to use single $ instead double $$ on $$('.pie') so your code like $('.pie') ? 您是否尝试过在$$('.pie')上使用单$而不是双$$，所以您的代码就像$('.pie') ？

And check if you already to include jQuery 并检查您是否已经包含jQuery

Here is helpful link 这是有用的链接

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

https://api.jquery.com/ https://api.jquery.com/

未捕获的ReferenceError：未定义$$

问题描述

3 个解决方案

解决方案1
3 已采纳 2016-08-11 06:15:22

解决方案2
2 2016-08-11 06:25:13

解决方案3
0 2016-08-11 06:12:19

未捕获的ReferenceError：未定义$$

问题描述

3 个解决方案

解决方案1 3 已采纳 2016-08-11 06:15:22

解决方案2 2 2016-08-11 06:25:13

解决方案3 0 2016-08-11 06:12:19

解决方案1
3 已采纳 2016-08-11 06:15:22

解决方案2
2 2016-08-11 06:25:13

解决方案3
0 2016-08-11 06:12:19