Question

您好我有另外一个问题刚刚由stackoverflow成员解决，非常感谢您的快速回复和专业。下面是JS代码，我发现ibox根本就没有调用。

(function($) {
    $.fn.ibox = function() {
        // set zoom ratio //
        alert("asdfas");
        resize = 20;
        ////////////////////
        var img = this;
        img.parent().append("<div id='ibox' />");
        var ibox = $("#ibox");
        var elX = 0;
        var elY = 0;

        img.each(function() {
            var el = $(this);

            el.mouseenter(function() {
                ibox.html("");
                var elH = el.height();
                elX = el.position().left - 6; // 6 = CSS#ibox padding+border
                elY = el.position().top - 6;
                var h = el.height();
                var w = el.width();
                var wh;
                checkwh = (h < w) ? (wh = (w / h * resize) / 2) : (wh = (w * resize / h) / 2);

                $(this).clone().prependTo(ibox);
                ibox.css({
                    top: elY + "px",
                    left: elX + "px"
                });

                ibox.stop().fadeTo(200, 1, function() {
                    $(this).animate({top: "-="+(resize/2), left:"-="+wh},400).children("img").animate({height:"+="+resize},400);
                });
            });

            ibox.mouseleave(function() {
                ibox.html("").hide();
            });
        });
    };
});

$(document).ready(function() {
    $("#clickMe").click(function () { 
    alert("Me");
    }); 

    var html = "";
    var num = 1;

    for (var idx=0; idx<100; idx++)
    {
        if( num == 4) num = 1;
        html += "<img src='image/img" + num + ".jpg' class='grayscale' />";
        num ++;
    }  
    $("#images").html(html);

   $("#images img").ibox();


});

我错过了这里的任何通话步骤吗？请帮忙。感谢

Answer 1

问题是你没有将jQuery对象传递给包含插件的函数

(function($) {
     ....
 }); <-- Oops

将其更改为：

(function($) {
     ....
 })(jQuery); <-- Yay!

有一篇关于插件创作的好文章，你应该阅读：http://docs.jquery.com/Plugins/Authoring

Answer 2

您已将jQuery插件包装在立即调用的函数表达式中，除非您未能实际调用它。

将(jQuery)放在函数表达式之后：

(function($) {
    $.fn.ibox = function() {
        ...
    }
})(jQuery);

将它从“void”函数表达式转换为实际调用的表达式。

jQuery没有互相调用

2 个答案: