Javascript jQuery-如何从两个不同的网络事件加载公共div中的内容？

我不是JS忍者，因此我在这里寻求一些指导。我有以下几种情况

页面加载并隐藏commondiv

如果用户单击按钮showeditform，我将在commondiv中加载editform并显示commondiv

如果用户单击按钮showeditform且editform可见，请将其删除并隐藏commondiv

如果用户单击按钮showpasswordform并且editform可见并且我删除了editform并显示passwordform

如果用户单击按钮showpasswordform并且passwordform可见，请将其删除并隐藏公共div

如果用户单击按钮showeditform并且passwordform可见并且我删除passwordform并显示editform

到目前为止，我已经设置了国旗和其他标志，但这不是很好的方法。如何使用最少的jQuery代码实现这一点

更新：以下是我的尝试

$('a.editpo, a.resetpass').click(function(event){
    event.preventDefault();
    var urlToCall = $(this).attr('href');
    var hyperlinkid = '#'+$(this).attr('id');
    var targetId = $(this).attr('id').match(/\d+/);
    var targetTrDiv = '#poformloadertr_'+targetId;
    var targetTdDiv = '#poformloadertd_'+targetId;
    var toToggle = $('#resetuserpassform_'+targetId).is(':visible') || $('#account-home-container-'+targetId).is(':visible') ;
    console.log(toToggle);
    if(toToggle == true || $(targetTdDiv).html()==''){
        $.ajax({
            url:urlToCall,
            success: function(html){
                $(targetTdDiv).html(html);
                $(targetTrDiv).show();
            }
        });
    }else{
        $(targetTrDiv).hide();
        $(targetTdDiv).html('');
    }

});

---

editpo

和

resetpass

是应用于表列中的超链接的类，即编辑个人信息和重置pass，单击它们在

tr>td

中加载表单。正如我所说的，我不擅长JS，特别是jQuery，因此如果您觉得代码可以在某个步骤进行优化，请随意这样做。谢谢

我一周前就做过，但代码在家里，而我现在不在家。但基本上，您可以在数组中指定表单名称，并隐藏未选中的表单，如果再次单击选中的表单，请使用

.toggle（）函数隐藏它。
您可以尝试一下。这是假设您正在JS中存储表单HTML。如果您将其存储在一个隐藏的容器中，我可以向您展示如何将其移动到新的父容器中，或者只是将html复制到其中。。希望这有帮助

$("#commondiv").hide();

$("#showeditform").click(function(){
  if($("#commondiv").is(":visible")) {
    $("#commondiv").html("").hide();
  } else {
    $("#commondiv").html(editformHTML).show();
  }
});
$("#showpasswordform").click(function(){
  if($("#commondiv").is(":visible")) {
    $("#commondiv").html("").hide();
  } else {
    $("#commondiv").html(passwordformHTML).show();
  }
});

您可以这样做：

  $('#showeditform').click(function()
  {
       if($('#commondiv').is(':visible'))
          $('#commondiv').hide();
       else 
          $('#commondiv').html('The text you want to set').show();

       if($('#passwordform').is(':visible'))
       {
           $('#passwordform').remove();
           $('#editform').show();
       }
  });

  $('#showpasswordform').click(function()
  {
      if($('#editform').is(':visible'))
      {
         $('#editform').hide();
         $('#passwordform').show();
      }

      if($('#passwordform').is(':visible'))
      {
         $('#passwordform').remove();
         $('#commondiv').hide();
      }
  });

老实说，听起来你的页面在一个页面上做的太多了。上面的规则让我有点头疼
 试试这个

    $(function(){

        var $commonDiv = $("#commondiv");

        //Add the edit and password forms into common div and hide them initially
        $("#editform").hide().appendTo($commonDiv);
        $("#passwordform").hide().appendTo($commonDiv);

//Editing answer based on your comments.

        $(".showeditform").live('click', function(){

            if($("#editform").hasClass("loading")){//If form is already loading just return
               returnl
            }

            if(!$("#editform").is(":visible")){
               $("#editform").addClass("loading").load("EditFormUrl", function(){
                   $(this).removeClass("loading").show();
               });  
            }
            else{
               $("#editform").hide();
            }

            //Always hide the passwordform
            $("#passwordform").hide();
        }); 

       $(".showpasswordform").live('click', function(){

            if(!$("#passwordform").is(":visible")){
               $("#passwordform").addClass("loading").load("PasswordFormUrl", function(){
                   $(this).removeClass("loading").show();
               });  
            }
            else{
               $("#passwordform").hide();
            }

            //Always hide the editform
            $("#editform").hide();

        });
    });

使用JQuery，还可以链接链中的方法。因此.fadeOut（300）.html（newHTML）.fadeIn（300）将在300毫秒内淡出内容，将新html加载到容器中，并在300毫秒内淡入内容。下面是我的take
remove（）
将从dom中删除元素。下一次你将如何展示它？它没有做任何特别的事情，gmail界面是你能做的，在一个页面上做的太多了，但是谢谢或提示OP说删除，而不是在某些情况下隐藏。如果他的意思是隐藏，那么他的问题就有点模糊了。沙卡尔问题是我在Ajax调用中加载表单，但我仍然喜欢你说的话。在这种情况下，你可以在将表单添加到dom中后在Ajax成功回调中执行我的代码（第页）。如果这两个按钮也是来自ajax响应，那么您需要使用jQuery
live
来附加单击处理程序。为了进一步复杂化，当您单击按钮时将加载表单：），实际上加载了一个网格，在网格中，我将showeditform和showpasswordform类应用于多个“重置密码”和“编辑信息”按钮，单击这些按钮必须在一个div中使用ajax调用加载相应的表单，希望我现在明白了现在您的问题完全改变了。我已经回答了你的问题。但我会回答这个问题，你也应该提出一个新问题。