简化相似元素的多重功能

I'm really new to jQuery, and after looking around in different threads I still can't seem to figure this out. Hoping someone out there is kind enough to break this down for me with kid gloves.

我是jQuery的新手,在查看不同的主题之后,我似乎仍然无法弄清楚这一点。希望有人在那里用小孩手套为我打破这种情况。

I'm trying to figure out how to simplify multiple functions to achieve different popups for different, but similar elements.

我试图弄清楚如何简化多个函数,以实现不同但相似元素的不同弹出窗口。

Here's what it currently looks like:

这是目前的样子:

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

Here's a CodePen for the full thing:

这是一个完整的CodePen:

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

1 个解决方案

#1

Simple solution based on your markup.. of course there are more ways of doing this but not sure how much control u have over the markup

基于您的标记的简单解决方案..当然有更多的方法可以做到这一点但不确定您对标记有多少控制权

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

});