通过jquery选择除少数之外的所有元素

Question

我想根据点击显示和隐藏一些元素。我有两个按钮，当您单击其中一个按钮时，它将显示一个表单，如果您单击另一个按钮，它将显示另一个表单。现在我想要的是，如果有人点击了按钮，它将显示表单，然后如果他点击其他地方，该表单应该被隐藏。我通过以下代码完成了他的第一部分

$(document).ready(function(){
    $("#login_btn").click(function(){
      $("#login_form").toggleClass("hide");
      $("#signup_form").addClass("hide");
    });
    $("#signup_btn").click(function(){
      $("#signup_form").toggleClass("hide");
      $("#login_form").addClass("hide");
    });
    $(".container > :not(#login_btn)").click(function(){
      $("#signup_form").addClass("hide");
      $("#login_form").addClass("hide");
    });
  });

现在我想在点击其他地方时隐藏这些表单。 我尝试使用 $('body > :not('#login_form,#signup_form')，但它也禁用了按钮的活动，当我单击按钮时它不显示表单。 我已经在 stackoverflow 和其他地方搜索了类似的问题，但没有一个解决方案有效。所以有人知道怎么做吗？

Answer 1

您可以通过快速搜索单击的位置来隐藏任何元素。你想知道的是：我点击了文档吗？我点击了按钮吗？否则，我是否点击了表格？如果我单击了表单，请不要关闭它。如果我在表单外部单击，请关闭表单。

$(document).click(function(event){
    var target = $(event.target);
    /* if the target is a button, don't continue as we want to keep its click */
    if(target.attr("id") === "login_btn" || target.attr("id") === "signup_btn"){
        return;
    }
    /* lets see if the target, or any of its parents, has the form id we are looking for */
    /* if it doesn't, hide that form */
    if(!target.closest("#login_form").length){
        $("#login_form").hide();
    }
    if(!target.closest("#signup_form").length){
        $("#signup_form").hide();
    }
});

更新

抱歉，点击应该是在文档上，而我使用的 ID 不正确。所有表单 ID 现在都使用下划线而不是破折号（即 login_form）。我还在第三个 if 中使用了错误的 id，在我检查 signup_form 时指向登录表单。我已经修改，尝试过，它确实有效。