jQuery / HTML5轮盘不起作用

Question

我正在尝试在我的网站中实现jquery / html5轮盘赌。
我找到了一些我想使用的jsfiddle代码： http : //jsfiddle.net/kYvzd/118/但是，当我尝试在我的网站上实现它时，它将无法正常工作。错误TypeError：$（...）。spinwheel不是函数[了解更多]

这是我实现的代码：HTML：

<legend class="text-center header">Roulette!</legend>
  <div id="main">
    <div id="left-column">
      <form class="iform" action="#" method="get">
        <label for="joiner"></label>
        <input id="joiner" name="joiner" class="joiner" placeholder="Please Enter your name" />
        <button class="add">Add</button>
        <button class="spin-trigger">Spin</button>
      </form>        
      <canvas class="canvas" width="500" height="500"></canvas> 
    </div>
    <div id="right-column">
      <p class="winner">The Winner is ... <span>&nbsp;</span></p>
      <ul class="participants">
      </ul>
    </div>
    <div style="clear:both"></div>

  </div>

<script>
$(document).ready(function(){
   $('.canvas').spinwheel({
       pplArray : ["♈", "♉", "♊", "♋","♌", "♍", "♎", "♏","♐", "♑", "♒", "♓"]
   });
});
</script>

JS与JS文件完全一样，实现方式如下：

<script src="http://code.jquery.com/jquery-1.6.js" type="text/javascript"></script>
<?php
  if($active=="roulette") echo '<script src="js/roulette.js" type="text/javascript"></script>'
?>

我可以看到该文件是roulette.js的实现，因此PHP部分$ active没什么错。
我真的很傻，因为我基本上只是复制了代码，因此无法正常工作。
HTML中的<script>部分是我唯一移动过的部分，因为我需要在那里动态更改一些值。

更新：网站链接为： http : //randomstock.net/roulette.php

Answer 1

您的站点中包含两个jQuery副本。 看着你有<head>

<script src="http://code.jquery.com/jquery-1.6.js" type="text/javascript"></script>
<script src="js/roulette.js" type="text/javascript"></script>

至此，您已经在页面上运行了jQuery 1.6，并且按预期将Spinwheel插件添加到了jQuery中。

你有代码

$(document).ready(function () {
    $("canvas").spinwheel(...);
});

这一切都可以按照您的预期进行。

然而！

在页面底部，您已经

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

此时，您有了一个新的jQuery副本-一个未安装Spinwheel插件的副本。 您的页面处于一种奇怪的边缘状态，其中$(document).ready是从jQuery 1.6运行的，但是运行时其中的$将是没有插件的较新的jQuery。

两种解决方案：

首选：摆脱重复的jQuery
$(document).ready(function($) { ... })将确保函数内部的$外部的$相同。

jQuery / HTML5轮盘不起作用

问题描述

1 个解决方案

解决方案1
1 2016-10-16 13:05:28

jQuery / HTML5轮盘不起作用

问题描述

1 个解决方案

解决方案1 1 2016-10-16 13:05:28

解决方案1
1 2016-10-16 13:05:28