我的外部jQuery文件出了什么问题

What is wrong with my external jQuery File?

本文关键字：什么 问题 文件 外部 jQuery 我的      更新时间：2023-09-26

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

更新的代码：

（INIT已在此处输入）这是我在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的人

您需要初始化一个名为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 );

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

从你的代码中还不完全清楚，但我想你想要的是这样的东西：

// 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");
    });
});
相关文章：