不允许立即显示所有弹出窗口，只需打开一个弹出窗口 onclick

Question

你可以在那里看到我的代码。我的问题是这样的：我有 4 个 link 并且单击它们中的每一个都会打开相应的弹出窗口，但我不能允许立即显示很多弹出窗口只必须打开一个弹出窗口，所以单击其中一个 link 必须打开它的弹出窗口，但是当用户点击其他点击时，点击事件应该被禁用。

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

Answer 1

你可以做一个更简单的解决方案：

将您的代码更改为以下代码并将 "popup" class 添加到您的 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();        
});

Answer 2

代码中的 .off('click') 函数从元素中删除了点击事件。这就是链接被禁用的原因。添加和删除事件侦听器 .on() .off() 很复杂。更容易确保每次打开新弹出窗口时旧弹出窗口都会关闭。添加 .popup class 将是第一步。我更新了你的 fiddle：http://jsfiddle.net/2j1obh92/

jQuery

jQuery(document).ready(function(){

    jQuery("a.fp").click(function(){
        jQuery(".popup").hide();
        jQuery(".first").fadeIn();
    });

    jQuery("a.sp").on('click', function(){
        jQuery(".popup").hide();
        jQuery(".second").fadeIn();
    });

    jQuery("a.tp").on('click', function(){
        jQuery(".popup").hide();
        jQuery(".third").fadeIn();
    });

    jQuery("a.ftp").on('click', function(){
        jQuery(".popup").hide();
        jQuery(".fourth").fadeIn();
    });

    // Hide the popup if the X gets clicked
    jQuery(".popup span").on('click', function(){
        jQuery(".popup").hide();
    });
});

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>

不允许立即显示所有弹出窗口，只需打开一个弹出窗口 onclick

Don't allow to show all popups immediately just one popup must be opened onclick

javascript

jquery

popup