jQuery/HTML5ルーレットが動作しない

私は自分のサイトにjquery/html5ルーレットを実装しようとしています。
私は使用したいjsfiddleコードを見つけました：http://jsfiddle.net/kYvzd/118/ しかし、私は私のウェブサイトでそれを実装しようとしています。それは動作しません.. エラーTypeError：$（.. 。。）spinwheelは機能ではありません[詳細]jQuery/HTML5ルーレットが動作しない

これは私が実装したコードです： 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では何も問題ありません。
基本的にコードをコピーしても機能しないので、私は本当に馬鹿だと感じています。
そして、<script> HTMLの部分は、移動した唯一のものです。一部の値を動的に変更する必要があるためです。

更新： ウェブサイトのリンクは次のとおりです。http://randomstock.net/roulette.php

出典

2016-10-16 Denniz

jquery 1.6は非常に古いです。多分roulette.jsはこのバージョンでサポートされていない何かを行います - jquery 1.9またはjquery 3を試してください –

jsfiddleはjQuery 1.6を実行しています –

あなたはjQueryのの2つのコピーがあなたのサイトに含まれています。 <head>を見ると、あなたがこの時点で

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

を持って、あなたが期待しているようspinwheelプラグインはjQueryのに追加でのjQuery 1.6は、ページ上で実行されています。

あなたはコード

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

あなたが期待しているように、これはすべての仕事としています。

どのように！あなたのページの一番下に向けて

は、あなたはjQueryのの新しいコピーを持って、この時点で

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

を持っている - インストールspinwheelプラグインなしの1。あなたのページは、 $(document).readyがjQuery 1.6から実行されている奇妙なリンボ状態にありますが、実行時に $がプラグインなしで新しいjQueryになります。

2種類の溶液：

優先は：
$(document).ready(function($) { ... }) jQueryの

$

出典

2016-10-16 13:05:28 iblamefish

3番目のオプションは[nonconflict]（https://api.jquery.com/jquery.noconflict /）。私はまだオプション1を好むだろう。 –

jQuery/HTML5ルーレットが動作しない

答えて

関連する問題