Question

我尝试创建多个可以通过单击按钮关闭的div。作为jquery的新手，我确信有更好的方法可以做到这一点。

我的问题是：有没有更好的方法来做到这一点？
编辑：有没有办法让一个div打开并取消，并且在用户没有关闭它的情况下已经打开了一个？

    //hidden divs
    $(document).ready(function () {
    $(".x").click(function () {
    $("#tcm_content").hide();
      });
    });

    $(document).ready(function () {
    $(".x").click(function () {
    $("#bazinga_content").hide();
      });
    });

    //thumbnails
    $("#tcm").click(function () {
    $("#tcm_content").show("600", function () {});
    });

    $("#bazinga").click(function () {
    $("#bazinga_content").show("600", function () {});
    });

这是我的小提琴：http://jsfiddle.net/0t6uqwLm/13/

Answer 1

您可以在点击事件中关闭多个div，例如

$(document).ready(function () {
    $(".x").click(function () {
        $("#bazinga_content").hide();
        $("#tcm_content").hide();
    });
});

您不需要使用多个document.ready函数。您实际上可以使用一个document.ready并将所有内容放入其中。

在这里工作JsFiddle https://jsfiddle.net/0t6uqwLm/10/

有问题的更新的新JsFiddle https://jsfiddle.net/0t6uqwLm/12/

Answer 2

$(document).ready(function () {
    $(".x").click(function () {
        $("#tcm_content").hide();
        $("#bazinga_content").hide();
      });
    });

    //thumbnails
    $("#tcm").click(function () {
    $("#tcm_content").show("slow");
    });

    $("#bazinga").click(function () {
    $("#bazinga_content").show("slow");
    });

Answer 3

一切都应该进入就绪功能，你只需要一个x类的点击处理程序

$(document).ready(function () {
    $(".x").click(function () {
        $("#tcm_content").hide();
        $("#bazinga_content").hide();
    });

    //thumbnails
    $("#tcm").click(function () {
        $("#tcm_content").show("600", function () {});
    });

    $("#bazinga").click(function () {
        $("#bazinga_content").show("600", function () {});
    });
});

至于什么更好，这是使用jQuery显示和隐藏div的完全可接受的方式。

为了澄清，jQuery使用选择器来获取您想要的页面上的特定元素。当您致电$("#tcm").click...时，jQuery会使用id="tcm"寻找该元素。如果尚未加载到DOM中，则不会有将click事件附加到的元素。这就是他们应该进入ready函数的原因，因为在文档加载了所有元素之前它不会被调用。

隐藏的分裂 - Jquery关闭和效率

3 个答案: