javascript - 我的外部 jQuery 文件有什么问题？

Question

我正在制作一个图像幻灯片。目前，我已将该事件附加到 H1 元素。这是我的代码存储在文件夹 jq 中的文件 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 < 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");
    });
});

更新代码:

(初始化已在此处注释)这是 HTML header 标记中的 jQuery:-

<!-- 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 NOOB 的人

Answer 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 );