Сценарий jQuery не выполняется, но он работает в jsfiddle - PullRequest
Новая
       15

Сценарий jQuery не выполняется, но он работает в jsfiddle

0 голосов
/ 12 марта 2012

У меня возникли проблемы с работой моих скриптов. Они отлично работают в jsFiddle, но когда я беру их на сайт, я не вижу, как скрипт вступает в силу.

Мой вопрос: каков наилучший способ внедрения сценария в страницу? Не одобряется ли копирование / вставка?

Для справки, вот jsfiddle, который работает http://jsfiddle.net/j08691/TgFvP/15/, и страница, на которой я не вижу эффекта http://www.tailwatersflyfishing.com/sage-fly-rods

Я супер новичок в этом, так что я уверен, что это что-то стандартное, что мне не хватает. Есть предложения?

Спасибо!

Ответы [ 5 ]

0 голосов
/ 12 марта 2012

Это готовый код, который вам нужен: 

$(function () {
    $('.rod-list').hover(function () {
        $('.rod-list', this).slideToggle('fast');
    }, function () {
        $('.rod-list', this).slideToggle('fast');
    });
});

Похоже, что на странице могут быть и другие ошибки.

Примечание: 

$(function () {

является ярлыком для: 

$(document).ready(function() {
0 голосов
/ 12 марта 2012

если вы запустите Firebug или другой набор инструментов разработчика, вы увидите, что у вас отсутствует фигурная скобка.

у вас есть это на сайте ... 

$('document').ready(function(){
    $('.rod-list').hover(function() {
        $('.rod-list', this).slideToggle('fast');
    }, function() {
        $('.rod-list', this).slideToggle('fast');
});

и что вам нужно это ... 

$('document').ready(function(){
    $('.rod-list').hover(function() {
        $('.rod-list', this).slideToggle('fast');
    }, function() {
        $('.rod-list', this).slideToggle('fast');
    });
});
0 голосов
/ 12 марта 2012

В частности, ваша проблема с этим фрагментом кода состоит в том, что вы пропускаете закрывающий }); для блока $(document).ready(); 

<script type="text/javascript">
$('document').ready(function(){

    $('.rod-list').hover(function(){
       $('.rod-list', this).slideToggle('fast');
    }, function() {
       $('.rod-list', this).slideToggle('fast');
    });
// Add }); here!
</script>

Однако , еще большая проблемадля вас это то, что вы также включаете в страницу PrototypeJS, который переопределяет $ на его собственную особенность;так что даже если вы исправите <script>, вы получите Невозможно вызвать метод 'ready' с нулевой ошибкой.

Для исправления этого вам потребуетсяиспользуйте следующее: 

<script type="text/javascript">
jQuery('document').ready(function($){

    $('.rod-list').hover(function(){
       $('.rod-list', this).slideToggle('fast');
    }, function() {
       $('.rod-list', this).slideToggle('fast');
    });

});
</script>

Используется jQuery(), который не был переопределен Prototype, и поэтому все еще будет работать.Внутри обработчика готовности мы передаем $, чтобы внутри обработчика готовности, вы можете использовать $ в качестве удобного псевдонима для jQuery , но вне обработчика готовности $будет прототип .

0 голосов
/ 12 марта 2012

Ваши сценарии не работают, потому что вы получаете ошибки, которые мешают загрузке всего. Вам нужно открыть консоль, чтобы вы могли их видеть. Первое, что я бы начал, это w3c validator , чтобы убедиться, что ваша разметка чистая (в настоящее время существуют проблемы с проверкой).

0 голосов
/ 12 марта 2012

JQuery скрипт должен быть завернут в 

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

Поскольку функции jQuery необходимо выполнять только тогда, когда DOM готов.

...