類似の要素の複数の関数を簡略化

Question

私はjQueryを初めて使っています。別のスレッドで見ても、これを理解できないようです。誰かが欲しいのは、子供の手袋で私にこれを壊すほど親切です。

私は、異なるが類似した要素に対して異なるポップアップを達成するために複数の関数を単純化する方法を理解しようとしています。ここでは完全なもののためにCodePenだ

$("#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); 
}); 

：ここ

は、それが現在のようになりますあなたのマークアップに基づいて

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

Answer 1

シンプルなソリューション..もちろんのより多くの方法がありますこれを行うが、マークアップに対するコントロールの量はどれくらいあるかわからない。

$(".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(); 
    }); 

});