如何简化此 JQuery 代码
How to simplify this JQuery Code
这段代码对我来说完全没问题,当我在页面的某个部分时突出显示导航栏的链接。
但我很确定,有一个更简单/缩短的代码,它的作用相同。
问题是,我只是将这段代码复制并粘贴在一起,因为我不知道 JQuery 是如何工作的。
谁能告诉我如何简化这段代码?
<!-- START-AREA -->
$(function() {
$('beginstart').waypoint(function() {
$('#sec-start').addClass('active');
$('#sec-info').removeClass('active');
$('#sec-kontakt').removeClass('active');
$('#sec-referenzen').removeClass('active');
$('#sec-angebot').removeClass('active');
$('#sec-impressum').removeClass('active');
})});
$('endstart').waypoint(function() {
$('#sec-start').addClass('active');
$('#sec-info').removeClass('active');
$('#sec-kontakt').removeClass('active');
$('#sec-referenzen').removeClass('active');
$('#sec-angebot').removeClass('active');
$('#sec-impressum').removeClass('active');
}, {
offset: 'bottom-in-view'
});
这只是一个部分,但我有六个部分,所以如果能再短一点就好了。
Combine the selector by comma separating,您也可以在两种情况下使用相同的功能。
<!-- START-AREA -->
$(function() {
// define it as a function
var fun = function() {
$('#sec-start').addClass('active');
$('#sec-info,#sec-kontakt,#sec-referenzen,#sec-angebot,#sec-impressum').removeClass('active');
};
// use the function reference in both
$('beginstart').waypoint(fun);
$('endstart').waypoint(fun, {
offset: 'bottom-in-view'
});
});
您可以用逗号将多个选择器组合在一起
$(function() {
$('beginstart').waypoint(function() {
$('#sec-start').addClass('active');
$('#sec-info, #sec-kontakt, #sec-referenzen,
#sec-angebot, #sec-impressum').removeClass('active');
})});
这段代码对我来说完全没问题,当我在页面的某个部分时突出显示导航栏的链接。
但我很确定,有一个更简单/缩短的代码,它的作用相同。 问题是,我只是将这段代码复制并粘贴在一起,因为我不知道 JQuery 是如何工作的。
谁能告诉我如何简化这段代码?
<!-- START-AREA --> $(function() { $('beginstart').waypoint(function() { $('#sec-start').addClass('active'); $('#sec-info').removeClass('active'); $('#sec-kontakt').removeClass('active'); $('#sec-referenzen').removeClass('active'); $('#sec-angebot').removeClass('active'); $('#sec-impressum').removeClass('active'); })});
$('endstart').waypoint(function() {
$('#sec-start').addClass('active');
$('#sec-info').removeClass('active');
$('#sec-kontakt').removeClass('active');
$('#sec-referenzen').removeClass('active');
$('#sec-angebot').removeClass('active');
$('#sec-impressum').removeClass('active');
}, {
offset: 'bottom-in-view'
});
这只是一个部分,但我有六个部分,所以如果能再短一点就好了。
Combine the selector by comma separating,您也可以在两种情况下使用相同的功能。
<!-- START-AREA -->
$(function() {
// define it as a function
var fun = function() {
$('#sec-start').addClass('active');
$('#sec-info,#sec-kontakt,#sec-referenzen,#sec-angebot,#sec-impressum').removeClass('active');
};
// use the function reference in both
$('beginstart').waypoint(fun);
$('endstart').waypoint(fun, {
offset: 'bottom-in-view'
});
});
您可以用逗号将多个选择器组合在一起
$(function() {
$('beginstart').waypoint(function() {
$('#sec-start').addClass('active');
$('#sec-info, #sec-kontakt, #sec-referenzen,
#sec-angebot, #sec-impressum').removeClass('active');
})});