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执行此操作。

但是正如您所说，scrollElem是一个全局变量，因此我不能将所有这些代码都放在一个函数中。

意思是，要让它发挥作用 - 我必须这样做：

// 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...
}

现在，现有功能按设计运行，您也可以使用myFunc和call手动拨打apply。

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

Answer 4

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

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

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

4 个答案: