Vereinfachen Sie mehrere Funktionen für ähnliche Elemente

Question

Ich bin wirklich neu in jQuery, und nachdem ich mich in verschiedenen Threads umgesehen habe, kann ich das immer noch nicht herausfinden. Ich hoffe, dass jemand da draußen so freundlich ist, mir das mit Kinderhandschuhen zu brechen.

Ich versuche herauszufinden, wie mehrere Funktionen zu verschiedenen Popups für verschiedene, aber ähnliche Elemente zu vereinfachen.

Hier ist, was es sieht derzeit wie:

$("#cooper_link").click(function(e){ 
e.preventDefault(); 
$("#cooper_overlay").fadeIn(500); 
$("#cooper_popup").fadeIn(500,function(){$(this).focus();}); 
}); 

$("#quentin_link").click(function(e){ 
e.preventDefault(); 
$("#quentin_overlay").fadeIn(500); 
$("#quentin_popup").fadeIn(500,function(){$(this).focus();}); 
}); 

$("#jasper_link").click(function(e){ 
e.preventDefault(); 
$("#jasper_overlay").fadeIn(500); 
$("#jasper_popup").fadeIn(500,function(){$(this).focus();}); 
}); 

$("#jordan_link").click(function(e){ 
e.preventDefault(); 
$("#jordan_overlay").fadeIn(500); 
$("#jordan_popup").fadeIn(500,function(){$(this).focus();}); 
}); 

$("#james_link").click(function(e){ 
e.preventDefault(); 
$("#james_overlay").fadeIn(500); 
$("#james_popup").fadeIn(500,function(){$(this).focus();}); 
}); 

$("#liam_link").click(function(e){ 
e.preventDefault(); 
$("#liam_overlay").fadeIn(500); 
$("#liam_popup").fadeIn(500,function(){$(this).focus();}); 
}); 

$('.close').click(function() { 
$("#cooper_overlay, #quentin_overlay, #jasper_overlay, #jordan_overlay, #james_overlay, #liam_overlay").fadeOut(500); 
$("#cooper_overlay, #quentin_overlay, #jasper_overlay, #jordan_overlay, #james_overlay, #liam_overlay").fadeOut(500); 
}); 

$("#cooper_popup").on('blur',function(){ 
$("#cooper_overlay").fadeOut(500); 
$(this).fadeOut(500); 
}); 

$("#quentin_popup").on('blur',function(){ 
$("#quentin_overlay").fadeOut(500); 
$(this).fadeOut(500); 
}); 

$("#jasper_popup").on('blur',function(){ 
$("#jasper_overlay").fadeOut(500); 
$(this).fadeOut(500); 
}); 

$("#jordan_popup").on('blur',function(){ 
$("#jordan_overlay").fadeOut(500); 
$(this).fadeOut(500); 
}); 

$("#james_popup").on('blur',function(){ 
$("#james_overlay").fadeOut(500); 
$(this).fadeOut(500); 
}); 

$("#liam_popup").on('blur',function(){ 
$("#liam_overlay").fadeOut(500); 
$(this).fadeOut(500); 
}); 

Hier eine CodePen für die volle Sache ist:

http://codepen.io/chubbaluv/pen/GqZwjE

Answer 1

Einfache Lösung basiert auf Ihrem Markup .. natürlich gibt es mehr Möglichkeiten, dies tun, aber nicht sicher, wie viel Kontrolle Sie über die Markup haben

$(".rider").click(function(e){ 
e.preventDefault(); 
// get the link id 
var linkid = this.id 
// get the unique part of the section 
var id = linkid.replace("_link",""); 
// since all the elements have this part in their name, use it 
$("#"+id+"_overlay").fadeIn(500); 
    $("#"+id+"_popup").fadeIn(500, function() { 
    $(this).focus(); 
    }); 

});