Preventing code replication in javascript by combining these functions
So I have two jquery functions that bassically do the same, but on 2 seperate containers. Is there a way to combine these two functions.
$('#autobid-list .auction-button').click(
function(){
if($(this).attr('summary') == 'autobid-button'){
$(this).parents('li').addClass('none');
}else if($(this).attr('summary') == 'watchlist-button'){
if($(this).hasClass('watchlist-1')){
$(this).parents('li').clone().appendTo('#watchlist-list');
}else{
$('#watchlist-list .auction-' + $(this).parents('table').attr('summary')).parents('li').addClass('none');
}
}
}
);
$('#watchlist-list .auction-button').click(
function(){
if($(this).attr('summary') == 'watchlist-button'){
$(this).parents('li').addClass('none');
}else if($(this).attr('summary') == 'autobid-button'){
if($(this).hasClass('autobid-1')){
$(this).parents('li').clone().appendTo('#autobid-list');
}else{
$('#auto开发者_如何学运维bid-list .auction-' + $(this).parents('table').attr('summary')).parents('li').addClass('none');
}
}
}
);
These two do bassically the same, the only change is the input of either 'autobid' or 'watchlist'
Obvious answer:
$('#watchlist-list .auction-button').click(function(){
whatever.call(this,'watchlist', 'autobid');
});
$('#autobid-list .auction-button').click(function(){
whatever.call(this,'autobid', 'watchlist');
});
function whatever(one, two){
if($(this).attr('summary') == one + '-button'){
$(this).parents('li').addClass('none');
}else if($(this).attr('summary') == two + '-button'){
if($(this).hasClass(two + '-1')){
$(this).parents('li').clone().appendTo('#' + two + '-list');
}else{
$('#' + two + '-list .auction-' + $(this).parents('table').attr('summary')).parents('li').addClass('none');
}
}
}
Though some rethinking is probably better.
EDIT: Oops, fixed.
Sure, just determine which one was clicked and assign a variable according to that. You can select several elements at once when you separate them with commas:
$('#watchlist-list .auction-button, #autobid-list .auction-button').click(function() {
// Determine which button was clicked, you might want to adjust this as needed.
var type = $(this).closest('#autobid-list').length > 0 ? 'autobid' : 'watchlist';
// Then just replace 'autobid' and 'watchlist' with 'type'
if($(this).attr('summary') == type+'-button') {
$(this).parents('li').addClass('none');
} else if($(this).attr('summary') == type+'-button') {
if($(this).hasClass(type+'-1')) {
$(this).parents('li')
.clone()
.appendTo('#'+type+'-list');
} else {
$('#'+type+'-list .auction-' + $(this).parents('table').attr('summary'))
.parents('li')
.addClass('none');
}
}
});
Could this work? Make a function that returns a function:
function MyFunction(type) {
return function(){
if($(this).attr('summary') == type + '-button'){
$(this).parents('li').addClass('none');
}else if($(this).attr('summary') == type + '-button'){
if($(this).hasClass(type + '-1')){
$(this).parents('li').clone().appendTo('#' + type + '-list');
}else{
$('#' + type + '-list .auction-' + $(this).parents('table').attr('summary')).parents('li').addClass('none');
}
}
}
}
$('#autobid-list .auction-button').click(MyFunction('autobid'));
$('#watchlist-list .auction-button').click(MyFunction('watchlist'));
精彩评论