Проблемы с получением jQuery для работы во внешнем js-файле - PullRequest
Новая
       2

Проблемы с получением jQuery для работы во внешнем js-файле

0 голосов
/ 04 апреля 2011

Я только что начал возиться с jQuery, и мне повезло, что он работал в реальных файлах aspx и html, но сейчас я пытаюсь заставить его работать во внешнем файле js.

В моем htmlфайл в голове у меня есть: 

 <!--Declare jQuery files-->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1-vsdoc.js"></script>

<!--Declare external java files-->
<script type="text/javascript" src="javascript/SiteFunction.js"></script>

Я пытался добавить это, чтобы избежать нескольких готовых экземпляров документов, это ни к чему не привело, в любом случае: 

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

В моем внешнем файле (он находится в операторе if, и моя функция буквально пропускает все jQuery .append и .animate, как будто его там даже нет): 

        $(document).ready(function() {
            $('<p>Test</p>').append("#" + newPage);
        });

        jQuery(function($) {
            alert(newPage);
            $('<p>Test</p>').appendTo(newPage);

            $(newPage).animate({ left: '0px' }, 2000, function() {
                // Animation complete.
                alert("animated newPage");
            });

            $(currentPage).animate({ right: '0px' }, 2000, function() {
                // Animation complete.
            });
        });

ПервыйjQuery append - это простой тест, чтобы увидеть, могу ли я сделать что-то простое.Все это содержится в операторе if.Я не получаю никаких ошибок, и код предшествует через первый готовый jQuery, переходя в функцию jQuery, мое оповещение (newPage) работает, но мое оповещение ("animated newPage") не так, я знаю, что я даже невход в любую из функций jQuery.

Если моя терминология неверна, пожалуйста, прости меня, я снова начал работать с Query за последние 3-4 дня.

Мои переменные, newPageи currentPage - это идентификаторы div, содержащиеся на главной html-странице.Я прекрасно обращаюсь к ним и манипулирую ими с помощью javascript в том же внешнем js-файле.

Я попытался с первым jQuery .append, чтобы увидеть, нужно ли мне добавлять "#" перед моим div id для ссылки в виде строки.

Я пробовал с остальными, оборачивая их в jQuery (function ($) {}) ;.Оставив их как одни, которые работали прямо из моего html-файла.

Пример рабочего кода из html-файла.Такая же настройка в заголовке файла 

                       $(myContent).animate({
                        width: '0px'
                    }, mySpeed, function() {
                        // Animation complete.
                    });

                    $('#contentH4').animate({
                        width: myLeft
                    }, mySpeed, function() {
                        // Animation complete.
                    });

Итак, я в полной растерянности!

Ответы [ 3 ]

4 голосов
/ 04 апреля 2011

Во-первых, вы должны включить JQuery только один раз . Все файлы, на которые вы ссылаетесь, имеют одинаковый код JS (за исключением того, что один минимизирован, а другой содержит дополнительные комментарии).

Это все, что вам нужно: 

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>

Кроме того, это поможет увидеть, где вы определяете newPage и currentPage. Если бы вы могли сделать ссылку на демонстрационную страницу, это было бы идеально.

Кроме того, это ничего не делает: 

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

А если newPage - это просто идентификатор, то это: 

$('<p>Test</p>').appendTo(newPage);

Должно быть так: 

$('<p>Test</p>').appendTo('#' + newPage);
1 голос
/ 04 апреля 2011

При связывании внешних файлов javascript / jquery тип = "" не нужно объявлять.

Также им нужно загружать нижнюю часть всего содержимого тела для лучшего времени загрузки.

0 голосов
/ 04 апреля 2011

Я использую ASP.NET с вложенными MasterPages, и это должно стать для меня настоящей проблемой. Я получал документ. Уже все время теряется. Я подумал, что мне нужен лучший способ, и я пришел к созданию массива для хранения всех своих функций, которые я хотел вызвать, и в одном документе .ready, перебирал этот массив, вызывая каждую функцию в том порядке, в котором она был добавлен. Если вы используете много внешних файлов, которые включены в разные точки по разным причинам, это позволит вам сделать это без каких-либо хлопот: 

<!-- your external javascript file -->
<script type="text/javascript">

    // create array to hold a list functions to run once
    var oneTimeFunctions = new Array;


    // create variable to store first function
    var test1 = function() { $('<p>Test</p>').append("#" + newPage); };

    // add first function to the end of the array
    oneTimeFunctions[oneTimeFunctions.length] = test1;


    // create variable to store second function
    var test2 = function() {

        alert(newPage);
        $('<p>Test</p>').appendTo(newPage);

        $(newPage).animate({ left: '0px' }, 2000, function() {
            // Animation complete.
            alert("animated newPage");
        });

        $(currentPage).animate({ right: '0px' }, 2000, function() {
            // Animation complete.
        });

    };

    // add second function to the end of the array
    oneTimeFunctions[oneTimeFunctions.length] = test2;


    // call document.ready only once
    $(function(){

        // call each function that was added to the oneTimeFunctions array
        $.each(oneTimeFunctions, function(index, func) { func(); });

    });

</script>

Теперь, как я уже сказал, вы можете разделить это на несколько внешних файлов. Это просто показывает, как это будет обрабатываться по порядку. Вам просто нужно сначала создать массив, затем создать свои функции и добавить их в массив в различных внешних файлах, и, наконец, запустить ту часть document.ready, которая проходит через вызов каждой функции.

...