Question

在jQuery中我总是遇到很多双重工作。我的意思是，我为不同的div写了同样的东西。

我有以下代码：

var about = $('#about').offset().top - parseFloat($('#about').css('margin-top').replace(/auto/, 0));
var education = $('#education').offset().top - parseFloat($('#education').css('margin-top').replace(/auto/, 0));
var work = $('#work').offset().top - parseFloat($('#work').css('margin-top').replace(/auto/, 0));

和

$(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();

    // whether that's below the form
    if (y >= about) {
        // if so, ad the fixed class
        $('#nav li').removeClass('current');
        $('.ab_about').addClass('current');
    } else {
        // otherwise remove it
        $('.ab_about').removeClass('current');
    }

    // whether that's below the form
    if (y >= education) {
        // if so, ad the fixed class
        $('#nav li').removeClass('current');
        $('.ab_education').addClass('current');
    } else {
        // otherwise remove it
        $('.ab_education').removeClass('current');
    }

    // whether that's below the form
    if (y >= work) {
        // if so, ad the fixed class
        $('#nav li').removeClass('current');
        $('.ab_work').addClass('current');
    } else {
        // otherwise remove it
        $('.ab_work').removeClass('current');
    }

});

你可以说，如果我有20个这样的项目，它将是一个非常长的剧本：P 关于如何自动化并使其变小的任何想法。我用.each方法尝试了一些东西，但这对我来说是死路一条。

泰

Answer 1

你可以创建一个简单的插件并将该插件分配给那些div：

$.fn.myplugin = function(options){
   var $this = $(this);
   var $navli = $(options.navli);
   var $abClass = $(options.abClass);
   var offset = $this.offset().top - parseFloat($this.css('margin-top').replace(/auto/, 0));
   $(window).scroll(function (event) {
        // what the y position of the scroll is
        var y = $(this).scrollTop();

        // whether that's below the form
        if (y >= offset) {
            // if so, ad the fixed class
            $navli.removeClass('current');
            $abClass.addClass('current');
        } else {
            // otherwise remove it
            $abClass.removeClass('current');
        }
    }
}

$(document).ready(function(){
    $('#about').myplugin({'navli': '#nav li', 'abClass': '.ab_about'});
});

Answer 2

我不知道你想要做什么，但从它的外观来看，你可能不应该使用JS来实现它。

无论如何，简化它的最好方法是创建一个jQuery插件。像这样：

$.fn.fixStuff = function() {
    return this.each(function() {
        var $this = $(this);
        return $this.offset().top - parseFloat( $this.css('margin-top').replace(/auto/, 0) );
    });
};

$('#about, #edutcation, #work').fixStuff();

jQuery为多个div自动化多个脚本

2 个答案: