jq轮播图封装function赋值为undefined

Question

代码我在网上找的，比较乱，我就简化了下，出现了3个我问题

1、这块代码出现了索引不是0开始，导致我后面需添加i++或i--

                    $(opts.small_elem).find("ul li").each(function(index) {
                        if ($(this).hasClass(opts.state)) {
                            console.log(index);
                            return index
                        }
                    });    

2、我封装了上述代码为function On()，但是负责给i，提示undefined

function On() {
                    
                    $(opts.small_elem).find("ul li").each(function(index) {
                        if ($(this).hasClass(opts.state)) {
                            console.log(index);
                            return index
                        }
                    });                    
 
                }

3、这代码还能优化，或者有什么bug吗

全部代码如下：

(function($) {
    var defaluts = {
        large_elem: ".large_elem",
        small_elem: ".small_elem",
        left_btn: ".left_btn",
        right_btn: ".right_btn",
        state: "on",
        speed: "normal",
        vis: 4
    };
    $.fn.extend({
        "thumbnailImg": function(options) {
            var opts = $.extend({}, defaluts, options);
            return this.each(function() {
                
                var t = 0;
                
                $(opts.large_elem).find("ul li").eq(0).show();
                $(opts.small_elem).find("ul li").eq(0).addClass(opts.state);
                
                var len = $(opts.small_elem).find("ul li").length;
                var out;      //在画面外的图片数量                
                var w = $(opts.small_elem).find("ul li").outerWidth(true);          //小图li的实际宽度=110+10=120     
               
               $(opts.small_elem).find("ul").css("width", len * w + "px");            //设置小图ul的宽度=120*6=720
               
               
               if (len < opts.vis) {//如果合计小图数量小于一页小图数量
                    out = 0
                } else {
                    out = len - opts.vis
                }
            
                

                
                
                //点击小图li
                $(opts.small_elem).find("ul li").click(function() {

                    t = $(this).index();   //返回点击的li的索引位置
                    Img(t)                 //执行img函数
                });
                
                //点击左边按键
                $(opts.left_btn).click(function() {
                    var i;
                
                    $(opts.small_elem).find("ul li").each(function(index) {
                        
                        if ($(this).hasClass(opts.state)) {
                            i = index;
                        }
                    });                        
                    i--;
                    if (i < 0) {//当前图片索引＜第一张图片索引，跳转到【最后一张】图片
                        i = len - 1
                    }

                    Img(i)
                });
                //点击右边按键
                $(opts.right_btn).click(function() {

                    
                    var i = On();
                    console.log(i);
                    i++;
                    //console.log(i);
                    if (i > len - 1) {//当前图片索引＞最后一张图片索引，跳转到【第一张】图片
                        i = 0
                    }


                    Img(i)
                });
                
                function On() {
                    
                    $(opts.small_elem).find("ul li").each(function(index) {
                        if ($(this).hasClass(opts.state)) {
                            console.log(index);
                            return index
                        }
                    });                    

                }

                
                function Img(i) {
                    $(opts.large_elem).find("ul li").eq(i).fadeIn().siblings().hide();
                    $(opts.small_elem).find("ul li").eq(i).addClass(opts.state).siblings().removeClass(opts.state);
                    
                    var wi = w * i;      //每张图片距离原点的距离
                    var wo = w * out;    //外面小图片距离原点的距离
                    
                    if (wi <= wo) {
                        $(opts.small_elem).find("ul").stop().animate({
                            marginLeft: -wi + "px"
                        }, opts.speed)
                    } else {
                        $(opts.small_elem).find("ul").stop().animate({
                            marginLeft: -wo + "px"
                        }, opts.speed)
                    }
                }

            })
        }
    })
}
)(jQuery);

Answer 1

你这里 1 是 return 回 2 的地方，而 3（On 方法本身）并没有 return 语句，自然就是 undefined 了。

如果你的目的是 return 出去那个 index ，那你可以直接这样做也行。

function On () {
    return $(opts.small_elem).find('ul li.' + opts.state).index()
}