[英]JQuery/Javascript - how to minimize duplicated code?
If I wanted to use the following code on multiple DIV#ID, how do I do so without duplicating code 如果我想在多个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');
});
What I want to do is perform this not only on div1
, but also on div2
, div3
, div4
. 我想做的是不仅在div1
上执行此操作,而且还要在div2
, div3
和div4
上执行此div4
。
But as you note, scrollElem
is a global variable so I can't just stick all of this code in 1 function. 但是,正如您注意到的那样, scrollElem
是一个全局变量,因此我不能仅将所有这些代码粘贴在1个函数中。
Meaning, to get this to work - I would have to do: 意思是,要使其正常工作-我必须做:
// 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');
});
That's copying and pasting a lot of duplicate code. 那就是复制和粘贴很多重复的代码。
Question : there must be a better way to do this. 问题 :必须有更好的方法来执行此操作。 Any ideas on how to accomplish the same functionality but minimize the duplication of code. 关于如何实现相同功能但尽量减少代码重复的任何想法。
use multiple selector when you define the scrollElem 定义scrollElem时使用多个选择器
var scrollElem = $('#div1, #div2, ...');
and inside the function, wherever you want to use the current scrollElem use $(this) 在函数内部,无论您想使用当前的scrollElem,都请使用$(this)
var scrollElemPos = $(this).offset();
etc.. 等等..
Put it into a function. 将其放入函数中。
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));
});
I think a combination of the answers provided by Gaby and munch would be optimal: 我认为将Gaby和munch提供的答案结合起来是最佳的:
Use a multi-selector and $(this)
, 使用多重选择器和$(this)
,
$('#div1, #div2, ...').scroll(myFunc);
In combination with a predefined function: 结合预定义功能:
function myFunc() {
var scrollElemPos = $(this).offset();
// etc...
}
Now existing functionality works as designed, and you can also call myFunc
manually with call
and apply
. 现在,现有功能可以按设计工作,并且您还可以使用call
和apply
手动调用myFunc
。
// call myFunc with .call or .apply to set context
myFunc.call(someElement); // inside myFunc "this" will point to someElement
couldn't you change the anonymous function to a named function and pass the same function to whatever.scroll? 您不能将匿名函数更改为命名函数,并将相同的函数传递给what.scroll吗?
the only thing you'd have to change would be the reference to scrollElemX. 您唯一需要更改的就是对scrollElemX的引用。 use $(this) instead. 使用$(this)代替。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.