我正在尝试在我的网站中实现 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> </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没有任何问题。
我觉得真的很愚蠢，因为我基本上只是复制了代码，但它不起作用......
还有<script> HTML 中的部分是我唯一移动的部分，因为我需要动态更改其中的一些值。
更新: 网站链接为:http://randomstock.net/roulette.php
最佳答案
您的站点中包含两个 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($) { ... })将确保$函数内部将与外部相同。
关于javascript - jQuery/HTML5 轮盘赌不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40070395/