jQuery / Javascript-如何减少重复的代码？

Question

如果我想在多个DIV＃ID上使用以下代码，该如何做而不重复代码

var scrollElem = $('#div1');
scrollElem.scroll(function() {
 /* find the closest (hlisting) home listing to the middle of the scrollwindow */ 
    var scrollElemPos = scrollElem.offset();
    var newCenter = $(document.elementFromPoint(
        scrollElemPos.left + scrollElem.width()  / 2,
        scrollElemPos.top  + scrollElem.height() / 2)
    ).closest('.hlisting');
    if(newCenter.is(".HighlightRow")) return;
    $('.HighlightRow').removeClass("HighlightRow");
    newCenter.addClass('HighlightRow');
});            

我想做的是不仅在div1上执行此操作，而且还要在div2 ， div3和div4上执行此div4 。

但是，正如您注意到的那样， scrollElem是一个全局变量，因此我不能仅将所有这些代码粘贴在1个函数中。

意思是，要使其正常工作-我必须做：

// DIV 2 ---------------------------
var scrollElem2 = $('#div2');
scrollElem.scroll(function() {
 /* find the closest (hlisting) home listing to the middle of the scrollwindow */ 
    var scrollElemPos = scrollElem2.offset();
    var newCenter = $(document.elementFromPoint(
        scrollElemPos.left + scrollElem2.width()  / 2,
        scrollElemPos.top  + scrollElem2.height() / 2)
    ).closest('.hlisting');
    if(newCenter.is(".HighlightRow")) return;
    $('.HighlightRow').removeClass("HighlightRow");
    newCenter.addClass('HighlightRow');
});

// DIV 3 ---------------------------
var scrollElem3 = $('#div3');
scrollElem3.scroll(function() {
 /* find the closest (hlisting) home listing to the middle of the scrollwindow */ 
    var scrollElemPos = scrollElem3.offset();
    var newCenter = $(document.elementFromPoint(
        scrollElemPos.left + scrollElem3.width()  / 2,
        scrollElemPos.top  + scrollElem3.height() / 2)
    ).closest('.hlisting');
    if(newCenter.is(".HighlightRow")) return;
    $('.HighlightRow').removeClass("HighlightRow");
    newCenter.addClass('HighlightRow');
});

那就是复制和粘贴很多重复的代码。

问题 ：必须有更好的方法来执行此操作。 关于如何实现相同功能但尽量减少代码重复的任何想法。

Answer 1

定义scrollElem时使用多个选择器

var scrollElem = $('#div1, #div2, ...');

在函数内部，无论您想使用当前的scrollElem，都请使用$（this）

var scrollElemPos = $(this).offset();

等等..

Answer 2

将其放入函数中。

function myFunc(elem){
    var scrollElemPos = elem.offset();
    var newCenter = $(document.elementFromPoint(
        scrollElemPos.left + elem.width()  / 2,
        scrollElemPos.top  + elem.height() / 2)
    ).closest('.hlisting');
    if(newCenter.is(".HighlightRow")) return;
    $('.HighlightRow').removeClass("HighlightRow");
    newCenter.addClass('HighlightRow');
}

var scrollElem = $('#div1');
scrollElem.scroll(function() {
  myFunc($(this));
}); 

Answer 3

我认为将Gaby和munch提供的答案结合起来是最佳的：

使用多重选择器和$(this) ，

$('#div1, #div2, ...').scroll(myFunc);

结合预定义功能：

function myFunc() {
    var scrollElemPos = $(this).offset();
    // etc...
}

现在，现有功能可以按设计工作，并且您还可以使用call和apply手动调用myFunc 。

// call myFunc with .call or .apply to set context
myFunc.call(someElement); // inside myFunc "this" will point to someElement

Answer 4

您不能将匿名函数更改为命名函数，并将相同的函数传递给what.scroll吗？

您唯一需要更改的就是对scrollElemX的引用。 使用$（this）代替。