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。以下是我所做的总结：

将每个弹出窗口的ID更改为公共类（编辑也将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

到单个函数（编辑：当它在div中时你有一个.topopup。应该是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);
}

清理工作可能还有很多工作要做，但这应该可以让你开始。诀窍是将所有弹出窗口放在一个公共类中，以便它们都可以被视为相同并使代码可重用。

打开新的时需要jQuery函数关闭open div

1 个答案: