javascript - 不允许立即显示所有弹出窗口，只有一个弹出窗口必须在单击时打开

Question

这是我的 fiddle :http://jsfiddle.net/b0qb37f4/6/

你可以在那里看到我的代码。我的问题是这样的:我有 4 个链接，单击每个链接都会打开相应的弹出窗口，但我不能允许立即显示大量弹出窗口，而必须打开一个弹出窗口，因此单击其中一个链接必须打开它的弹出窗口，但是当用户点击其他点击时，应禁用点击事件。

在我的代码中我使用了 .off('click')但关闭弹出窗口后，链接仍然被禁用。请帮我解决这个问题。

Answer 1

您可以制定一个更简单的解决方案:

将您的代码更改为以下代码，并将“popup”类添加到您的 div 中:

JS:

$(document).ready(function(){
    $("a.fp").click(function(){
        $(".popup").hide();
        $("div.fp").fadeIn();        
    });

    $("a.sp").click(function(){
        $(".popup").hide();
        $("div.sp").fadeIn();        
    });

    $("a.tp").click(function(){
        $(".popup").hide();
        $("div.tp").fadeIn();        
    });

    $("a.ftp").click(function(){
        $(".popup").hide();
        $("div.ftp").fadeIn();        
    });
});

HTML:

<a class="fp">First popup | </a>
<a class="sp">Second popup | </a>
<a class="tp">Third popup | </a>
<a class="ftp">Fourth popup</a>
<div class="popup fp">Hi, this is first popup content.<span>X</span></div>
<div class="popup sp">Hi, this is second popup content.<span>X</span></div>
<div class="popup tp">Hi, this is third popup content.<span>X</span></div>
<div class="popup ftp">Hi, this is fourth popup content.<span>X</span></div>

编辑最新问题:

当您使用此伪选择器检查弹出窗口当前是否可见时，可以抑制该函数:

$("a.fp").click(function(){
    if($('.popup:visible').length > 0)
        return; // do nothing

    $(".popup").hide();
    $("div.fp").fadeIn();        
});