JQuery/Javascript-如何最小化重复代码？

如果我想在多个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

上执行此操作

但正如您所注意到的，

scrollem

是一个全局变量，所以我不能将所有这些代码都放在一个函数中

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));
}); 

也就是说，要想让它发挥作用，我必须：

// 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');
});

这就是复制和粘贴大量重复代码

---

问题：一定有更好的方法。任何关于如何实现相同功能但尽量减少代码重复的想法。

将其放入函数中

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));
}); 

---

把它变成一个函数

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));
}); 

---

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

---

唯一需要更改的是对ScrolleMX的引用。改为使用$（this）。

能否将匿名函数更改为命名函数，并将相同的函数传递给where.scroll

---

唯一需要更改的是对ScrolleMX的引用。改为使用$（this）。

定义scrollElem时使用多个选择器

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

在函数内部，无论您想在何处使用当前scrollElem use$（此）

---

etc..

定义scrollElem时使用多个选择器

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

在函数内部，无论您想在何处使用当前scrollElem use$（此）

---

等等

我认为由和提供的答案的组合是最佳的：

使用多选择器和

$（此）

结合预定义功能：

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

---

我认为由和提供的答案的组合是最佳的：

使用多选择器和

$（此）

结合预定义功能：

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

---

必须更改对scrollElem3的引用，因为每个对象都需要不同的引用$（这个）好像有用。把我揍一顿。OP给出的代码没有理由不能放入函数中。如果有的话，最好是完全避免全局变量。那么myFunc（）中的scrollElem3呢？@ty&@Allen，错过了它…改为'elem'难道我不能通过执行：$（'#div1'）。scroll（function（）{myFunc（$（this））；}）；必须更改对scrollElem3的引用，因为每个对象都需要不同的引用$（这个）好像有用。把我揍一顿。OP给出的代码没有理由不能放入函数中。如果有的话，最好是完全避免全局变量。那么myFunc（）中的scrollElem3呢？@ty&@Allen，错过了它…改为'elem'难道我不能通过执行：$（'#div1'）。scroll（function（）{myFunc（$（this））；}）@艾伦，嗯。。您可以创建一个类似于

var$this=$（this）

的变量并使用它，而不是多次使用

$（this）

。。。我想那将是最好的.@ALlen，嗯。。您可以创建一个类似于

var$this=$（this）

的变量并使用它，而不是多次使用

$（this）

。。。我想那将是最好的。。