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

Question

我正在制作图片幻灯片。目前，我已将事件附加到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");
    });
});

更新代码：

（这里有一个小小的问题）这是我在HTML标题标签中的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>
            -->

以下是我正在编辑的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 );

Answer 2

您使用闭包来保护全局范围（这很好），但忘记为该功能提供外部接口。

您的代码并不完全清楚，但我认为您想要的是这样的：

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

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

你在init()函数中所做的事情并不属于你正在制作的插件。您可以将整个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");
    });
});