Что не так с моим внешним файлом jQuery?

#javascript #jquery #html

#javascript #jquery — запрос #HTML #jquery

Вопрос:

Я создаю слайд-шоу с изображением. В настоящее время я прикрепил событие к элементу H1. Вот мой код, хранящийся в файле main.js в папке jq :-

ОБНОВЛЕННЫЙ КОД:

 (function($) {
    $.fn.browseImages = function(type) {
        var image = [];
        image[3] = "http://farm5.static.flickr.com/4006/5131022085_62876bbfbd_b.jpg";
        image[2] = "http://farm6.static.flickr.com/5201/5289991939_46a20dd9fd_o.jpg";
        image[1] = "http://farm3.static.flickr.com/2127/5807551517_72d39a1d19_b.jpg";

        var imageObject = $(this);
        var selection;

        if (type == "left") {
            for (var i=1; i < image.length; i  ) {
                if (imageObject.attr("src") == image[i]) {
                    selection = i   1;
                }
            }
            imageObject.attr("src",image[selection]);
        } else {
            for (var i=1; i < image.length; i  ) {
                if (imageObject.attr("src") == image[i]) {
                    selection = i   1;
                }
            }
            imageObject.attr("src",image[selection]);
        };
    }

})(jQuery);

$(function() { // <-- equivalent to $(document).ready(...)
    $("h1").click(function() {
        $('#image').browseImages("left");
    });
});
  

ОБНОВЛЕННЫЙ КОД:

(ИНИЦИАЛИЗАЦИЯ БЫЛА прокомментирована ЗДЕСЬ) Вот мой jQuery в теге заголовка HTML:-

 <!-- Scripts -->
        <script src="http://rhnvrm.co.cc/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script src="jq/main.js" type="text/javascript" charset="utf-8"></script>
            <!--Initialize jQuery
            <script type="text/javascript">
                $(document).ready( function() {
                    init()
                });
            </script>
            -->
  

А вот Изображение в теге body, src attr которое я редактирую:-

 <div id="imageholder">
                <img id="image" src='http://farm3.static.flickr.com/2127/5807551517_72d39a1d19_b.jpg' width="900px" height="500px"/>
            </div>
  

ПРИМЕЧАНИЕ: Я человек, которого вы можете отнести к категории новичков в jQuery

Комментарии:

1. следует ли вызывать вашу функцию инициализации, например $.init();

2. В чем ваш вопрос? Что не работает?

3. кстати, для этого было бы намного проще использовать один из многих уже существующих плагинов jQuery slideshow, особенно если вы новичок, если только вы не кодируете это, чтобы узнать больше / попрактиковаться.

4. @nideo — Я больше разбираюсь в PHP

5. @Rohan Verma, я тоже, но jQuery очень удобен в Интернете.

Ответ №1:

Вам необходимо инициализировать вызываемый объект или массив image , прежде чем вы сможете добавлять в него элементы.

     var image = {};
    image[3] = "http://farm5.static.flickr.com/4006/5131022085_62876bbfbd_b.jpg";
    image[2] = "http://farm6.static.flickr.com/5201/5289991939_46a20dd9fd_o.jpg";
    image[1] = "http://farm3.static.flickr.com/2127/5807551517_72d39a1d19_b.jpg";
  

И если ваша функция — единственная, которая использует image , я бы убрал ее из функции и ограничил ее область в IIFE:

 (function($) {
    var image = {};
    image[3] = "http://farm5.static.flickr.com/4006/5131022085_62876bbfbd_b.jpg";
    image[2] = "http://farm6.static.flickr.com/5201/5289991939_46a20dd9fd_o.jpg";
    image[1] = "http://farm3.static.flickr.com/2127/5807551517_72d39a1d19_b.jpg";

    function browseImages(type) {
          // you could take `imageObject` out of this function as well if the
          //    element with the ID "image" never changes.
          //  v--------------------------------------------------------------
        var imageObject = $("#image");
        var selection;

        if (type == "left") {
            for (var i=1; i < Things.length; i  ) {
                if (imageObject.attr("src") == Things[i]) {
                    selection = i;
                }  // <--- removed semi-colon
            }  // <--- removed semi-colon

              // v----- use the cached object
            imageObject.attr("src",image[selection]);
        } else {
            for (var i=1; i < Things.length; i  ) {
                if (imageObject.attr("src") == Things[i]) {
                    selection = i;
                }  // <--- removed semi-colon
            }  // <--- removed semi-colon

              // v----- use the cached object
            imageObject.attr("src",image[selection]);
        }  // <--- removed semi-colon
    }


    init = function() {
        $("h1").click( function() {
            browseImages("left")
        });
    };
})( jQuery );
  

РЕДАКТИРОВАТЬ: После некоторых разъяснений, вот более простое решение:

 (function($) {
    var image = [
        "http://farm3.static.flickr.com/2127/5807551517_72d39a1d19_b.jpg",
        "http://farm6.static.flickr.com/5201/5289991939_46a20dd9fd_o.jpg",
        "http://farm5.static.flickr.com/4006/5131022085_62876bbfbd_b.jpg"
        ];

    var imageObject = $("#image");
    var selection = 0;

    function browseImages(type) {

        if (type == "left") {
            selection =   selection % image.length
        } else {
            selection = (selection || image.length);
            --selection;
        }
        imageObject.attr("src", image[selection]);
    }

    init = function() {
        $("h1").click(function() {
            browseImages("left")
        });
    };
})(jQuery);
jQuery(document).ready( init );
  

Комментарии:

1. jsfiddle.net/37TeW Я загрузил ваш код сюда и даже на свой локальный хостинг, но он не работает. не могли бы вы, пожалуйста, помочь

2. что вы имеете в виду под моим кэшированным объектом?

3. @Rohan: var imageObject = $("#image"); Вы кэшировали $("#image") в imageObject переменной, но затем все равно запускали $("#image") еще пару раз. Я просто заменил его переменной.

4. … Я взгляну на скрипку. РЕДАКТИРОВАТЬ: в скрипте вы MooTools выбрали в меню слева вместо jQuery .

5. Я подумал, что, поскольку я уже включил его в HTML, он не выдаст ошибку.

Ответ №2:

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

Из вашего кода это не совсем понятно, но я предполагаю, что вы хотите что-то вроде этого:

 // inside your browseImages function
var imageObject = $(this);

// somewhere near the bottom
$.fn.browseImages = browseImages; // so that you can use it like 
  

И то, что вы делаете в init() функции, на самом деле не относится к плагину, который вы создаете. Вы можете переместить всю функцию инициализации непосредственно в $(document).ready(...)

Обновить

Завершите код для main.js

 (function($) {
    $.fn.browseImages = function(type) {
        var image = [];
        image[3] = "http://farm5.static.flickr.com/4006/5131022085_62876bbfbd_b.jpg";
        image[2] = "http://farm6.static.flickr.com/5201/5289991939_46a20dd9fd_o.jpg";
        image[1] = "http://farm3.static.flickr.com/2127/5807551517_72d39a1d19_b.jpg";

        var imageObject = $(this);
        var selection;

        if (type == "left") {
            for (var i=1; i < Things.length; i  ) {
                if (imageObject.attr("src") == Things[i]) {
                    selection = i;
                }
            }
            imageObject.attr("src",image[selection]);
        } else {
            for (var i=1; i < Things.length; i  ) {
                if (imageObject.attr("src") == Things[i]) {
                    selection = i;
                }
            }
            imageObject.attr("src",image[selection]);
        };
    }

})(jQuery);

$(function() { // <-- equivalent to $(document).ready(...)
    $("h1").click(function() {
        $('#image').browseImages("left");
    });
});
  

Комментарии:

1. Я не могу переместить его в $ (document). готовое событие, поскольку я не хочу занимать место в моем index.php

2. ОК. Тогда вы можете с таким же успехом переместить «инициализацию jQuery» внутрь main.js (но оставить ее за пределами закрытия). А также предоставить init() функцию, например $.init = init; , а затем в doc.ready вызвать $.init()

3. вы имеете в виду, что я должен включить это $(document).ready( function() { init() }); в main.js ?

4. Пожалуйста, посмотрите обновленный код. Кроме того, неясно, что такое Things , но я надеюсь, что они определены где-то еще; Кроме того, ваши блоки if / else идентичны — не имеет смысла (продолжается работа?)