需要jquery函數來關閉打開新的div div

Question

我使用下面的代碼在我的主頁上打開一個DIV容器。它工作的很好，但它有點笨拙，因爲你必須關閉（x）打開DIV，然後才能打開另一個。我在頁面上有三個。理想情況下，如果我有DIV#A打開，並且我點擊按鈕B打開DIV#B，我想要DIV#A關閉，DIV#B立即打開。誰能幫忙？

這是我的javascript：

jQuery(function ($) { 
    // click trigger for popup 1 
    $("a.topopup").click(function() { 
     loading(); // loading 
     setTimeout(function() { // then show popup, delay in .5 second 
      loadPopup(); // function show popup 
     }, 100); // .5 second 
     $("#toPopup_2, #toPopup_3").hide(); 

     return false; 
    }); 
    // click trigger for popup 2 
    $("a.topopup_2").click(function() { 
     loading(); // loading 
     setTimeout(function() { // then show popup, delay in .5 second 
      loadPopup_2(); // function show popup 
     }, 100); // .5 second 
     $("#toPopup, #toPopup_3").hide(); 
     return false; 
    }); 
    // click trigger for popup 3 
    $("a.topopup_3").click(function() { 
     loading(); // loading 
     setTimeout(function() { // then show popup, delay in .5 second 
      loadPopup_3(); // function show popup 
     }, 100); // .5 second 
     return false; 
     $("#toPopup, #toPopup_2").hide(); 
    }); 

    /* event for close the popup */ 
    $("div.close").hover(

    function() { 
     $('span.ecs_tooltip').show(); 
    }, 

    function() { 
     $('span.ecs_tooltip').hide(); 
    }); 

    $("div.close").click(function() { 
     disablePopup(); // function close pop up 
    }); 

    $(this).keyup(function (event) { 
     if (event.which == 27) { // 27 is 'Ecs' in the keyboard 
      disablePopup(); // function close pop up 
     } 
    }); 

    $("div#backgroundPopup").click(function() { 
     disablePopup(); // function close pop up 
    }); 

    $('a.livebox').click(function() { 
     alert('Hello World!'); 
     return false; 
    }); 


    /************** start: functions. **************/ 
    function loading() { 
     $("div.loader").show(); 
    } 

    function closeloading() { 
     $("div.loader").fadeOut('normal'); 
    } 

    var popupStatus = 0; // set value 

    // load popup 1 
    function loadPopup() { 
     if (popupStatus == 0) { // if value is 0, show popup 
      closeloading(); // fadeout loading 
      $("#toPopup").fadeIn(0500); // fadein popup div 
      $("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8 
      $("#backgroundPopup").fadeIn(0001); 
      popupStatus = 1; // and set value to 1 
     } 
    } 
    // load popup 2 
    function loadPopup_2() { 
     if (popupStatus == 0) { // if value is 0, show popup 
      closeloading(); // fadeout loading 
      $("#toPopup_2").fadeIn(0500); // fadein popup div 
      $("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8 
      $("#backgroundPopup").fadeIn(0001); 
      popupStatus = 1; // and set value to 1 
     } 
    } 
    // load popup 2 
    function loadPopup_3() { 
     if (popupStatus == 0) { // if value is 0, show popup 
      closeloading(); // fadeout loading 
      $("#toPopup_3").fadeIn(0500); // fadein popup div 
      $("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8 
      $("#backgroundPopup").fadeIn(0001); 
      popupStatus = 1; // and set value to 1 
     } 
    } 

    // function close popups 
    function disablePopup() { 
     if (popupStatus == 1) { // if value is 1, close popup 

      $("#toPopup").fadeOut("normal"); 
      $("#toPopup_2").fadeOut("normal"); 
      $("#toPopup_3").fadeOut("normal"); 

      $("#backgroundPopup").fadeOut("normal"); 
      popupStatus = 0; // and set value to 0 
     } 
    } 

    /************** end: functions. **************/ 
}); // jQuery End 

這是我如何從我的頁面調用它：

<div id="popupcontainer"> 
    <div id="toPopup"> 
     <div class="close"></div> 
     <div id="popup_content">Content 1 Goes Here</div> 
    </div> 
    <div id="toPopup_2"> 
     <div class="close"></div> 
     <div id="popup_content">Content 2 Goes Here</div> 
    </div> 
    <div id="toPopup_3"> 
     <div class="close"></div> 
     <div id="popup_content">Content 3 Goes Here</div> 
     <!--toPopup end--> 

感謝， 鮑勃

Answer 1

有很多的事情你的腳本在這裏。最值得注意的是代碼重複的豐富性。我在做你想做的事情時壓縮了這一點，只需點擊一下，打開彈出窗口，然後顯示被點擊的那個。

Here is the jsfiddle爲完整的HTML和JavaScript cahnges。下面是什麼，我做了一個總結：

改變了你的IDS每個彈出一個通用類（編輯也改變ID =「popup_content」一類你不能有一個頁面上重複的ID）：

<div class="topopup"> 
    <div class="close">close</div> 
    <div class="popup_content">Content 1 Goes Here</div> 
</div> 
<div class="topopup"> 
    <div class="close">close</div> 
    <div class="popup_content">Content 2 Goes Here</div> 
</div> 
... 

接下來，我將您的各個功能合併爲一個。也就是說

$("a.topopup").click(function() { 
    //... 
    $("#toPopup_2, #toPopup_3").hide(); 
    //.... 
    return false; 
}); 

$("a.topopup_2").click(function() { 
    //... 
    $("#toPopup, #toPopup_3").hide(); 
    //.... 
    return false; 
}); 

//etc 

到一個單一的功能（編輯：你有a.topopup當它在一個div應該是div.topopup）：

$("div.topopup").click(function() { 
    loading(); // loading 

    //hide all open popups 
    $(".topopup").hide(); 

    //show the popup and stuff 
    var storedThis = this; 
    setTimeout(function() { // then show popup, delay in .5 second 
     loadPopup(storedThis); 
    }, 100); // .5 second 

    return false; 
}); 

最後，您同樣可以將你的3個loadPopup（）函數組合成

function loadPopup(popup) { 
    closeloading(); // fadeout loading 
    $(popup).fadeIn(0500); // fadein popup div 
    $("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8 
    $("#backgroundPopup").fadeIn(0001); 
} 

可能還有很多工作要清理，但這應該讓你開始。訣竅是將所有彈出窗口都放在一個普通的類中，這樣它們都可以被視爲相同，並使代碼可重用。