jQuery - execute a block of code in one line
I have a block of code:
$('#link_dwebsitedesign a').removeClass('selected');
$('#link_dhuisstijl a').removeClass('selected');
$('#link_dhosting a').removeClass('selected');
$('#link_dwordpress a').removeClass('selected');
$('#link_dseo a').removeClass('selected');
$('#link_dcms a').removeClass('selected');
$('#link_dslicen a').removeClass('selected');
$('#link_dwebshop a').removeClass('selected');
And it needs to be executed se开发者_如何学Cveral times in my script.
Isn't there a selector or anything so i can execute this block of code in one line?
Example: $('blockofcode').execute();
You can wrap the code in a function:
function mycode(){
$('#link_dwebsitedesign a').removeClass('selected');
$('#link_dhuisstijl a').removeClass('selected');
$('#link_dhosting a').removeClass('selected');
$('#link_dwordpress a').removeClass('selected');
$('#link_dseo a').removeClass('selected');
$('#link_dcms a').removeClass('selected');
$('#link_dslicen a').removeClass('selected');
$('#link_dwebshop a').removeClass('selected');
}
And call your function wherever you want:
mycode();
See Javascript Functions tutorial for more info.
Might I suggest it could be shortened:
$('#link_dwebsitedesign a, #link_dhuisstijl a, #link_dhosting a, #link_dwordpress a, #link_dseo a,#link_dcms a, #link_dslicen a, #link_dwebshop a').toggleClass('selected');
Which does the same thing. You could put that in a function like so:
function jQuery_ToggleSelected()
{
$('#link_dwebsitedesign a, #link_dhuisstijl a, #link_dhosting a, #link_dwordpress a, #link_dseo a,#link_dcms a, #link_dslicen a, #link_dwebshop a').toggleClass('selected');
}
And just called jQuery_ToggleSelected()
to add/remove the desired style to those elements.
Create a small plugin that does this for you, since you seem to be doing it all the time:
(function($) {
$.fn.removeSelected = function() {
return $(this).each(function() {
$('a', this).removeClass('selected');
});
});
})(jQuery);
Then pass jQuery
an array of selectors to remove the class...
var links_array = ['#link_dwebsitedesign', '#link_dhuisstijl', '#link_dhuisstijl', '#link_dwordpress', '#link_dseo', '#link_dcms', '#link_dslicen', '#link_dwebshop'];
function removeLinks(links) {
$(links.join(', ')).removeSelected();
}
removeLinks(links_array);
And voila!
You can either use a class that is the same for all and call
$('.link a').removeClass('selected');
Or if you know what element you are calling you can remove all the ones with ids beginning with link (using div):
$('div[id^=link_] a').removeClass('selected');
Or call everything from a function
function removeLinkSelects(){
$('#link_dwebsitedesign a').removeClass('selected');
$('#link_dhuisstijl a').removeClass('selected');
$('#link_dhosting a').removeClass('selected');
$('#link_dwordpress a').removeClass('selected');
$('#link_dseo a').removeClass('selected');
$('#link_dcms a').removeClass('selected');
$('#link_dslicen a').removeClass('selected');
$('#link_dwebshop a').removeClass('selected');
}
removeLinkSelects();
I'd probably be most likely to use those in that order, if I couldn't/didn't want to add a class use the attr selector and if that was wildly different use a function. Although in terms of the way the code looks like it could be structured I'd be more inclined to use but obviously I don't know why you've marked them up like that and most likely it's perfectly logical
Put it in a function and then call the function instead.
I would give all those #link_dwebsitedesign, #link_dhuisstijl
, etc. elements a common class, for example class="link"
, then just use .class
selector like this:
$(".link a").removeClass("selected");
You can do this anywhere you find yourself repeating code...if you want to handle elements in a batch, use a common class to identify them, then operate on that class.
$('#link_dwebsitedesign a , #link_dhuisstijl a, #link_dhosting a, #link_dwordpress a, #link_dseo a, #link_dcms a, #link_dslicen a, #link_dwebshop a').removeClass('selected');
Or put it in a Function
精彩评论