JQuery/Javascript - 如何最小化重複的代碼？

如果我想用下面的代碼放在多個DIV＃ID，我該怎麼做，而不必複製代碼JQuery/Javascript - 如何最小化重複的代碼？

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是一個全局變量，所以我不能只把所有這些代碼都放在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'); 
});

這是複製和粘貼了大量的重複代碼。

問題：必須有更好的方法來做到這一點。關於如何實現相同的功能，但儘量減少代碼重複的任何想法。

來源

2010-01-28 Allen

把它放到一個函數中。

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

來源

2010-01-28 19:10:25 munch

必須更改對scrollElem3的引用，因爲它需要對每個對象都不相同。 $（this）好像會起作用。 – 2010-01-28 19:11:26

擊敗我。沒有理由OP給出的代碼不能放入函數中。如果有的話，最好避免全局變量。 – 2010-01-28 19:11:39

myFunc（）中的scrollElem3怎麼樣？ – Allen 2010-01-28 19:12:57

-1

難道你不能將匿名函數更改爲一個命名函數並將相同的函數傳遞給whatever.scroll？

你必須改變的唯一的事情就是引用scrollElemX。使用$（this）來代替。

來源

2010-01-28 19:10:38

使用多個選擇，當你定義scrollElem

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

和功能，無論你想使用當前scrollElem使用$（本）

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

等內部..

來源

2010-01-28 19:10:44

以秒爲單位打敗我... :) – 2010-01-28 19:11:39

這樣做會有性能損失嗎？ – Allen 2010-01-28 19:18:33

@ALlen，以及..而不是使用'$（this）'多次你可以創建一個像'var $ this = $（this）'這樣的變量並且使用那個......這將是最優的我想.. – 2010-01-28 19:42:30

我認爲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

來源

2010-01-28 19:23:32 Joel

JQuery/Javascript - 如何最小化重複的代碼？

回答

相關問題