Рулетка jQuery / HTML5 не работает

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я пытаюсь внедрить рулетку 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>amp;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

Ответ №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, а в jQuery добавлен плагин spinwheel, как вы и ожидали.

У вас есть код

 $(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($) { ... }) гарантирует, что $ внутренняя функция будет такой же, как и внешняя.