Question

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

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

以下是目前的情况：

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

这是完整的CodePen：

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

});

简化类似元素的多重功能

1 个答案: