jQuery - 如何從兩個不同的事件加載共同的div中的內容？

Question

我不是JS忍者，因此我在這裏要求一些指導。我有以下情形

1. 頁面加載和commondiv隱藏
2. 如果用戶點擊按鈕showeditform，我加載commondiv editform並顯示commondiv
3. 如果用戶點擊按鈕showeditform和editform是可見的，刪除它，隱藏commondiv
4. 如果用戶點擊按鈕showpasswordform如果editform是可見的，我刪除editform並顯示passwordform
5. 如果用戶點擊按鈕showpasswordform如果passwordform可見，刪除和隱藏的共同DIV
6. 如果用戶點擊按鈕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在表列中的超鏈接應用類，即修改個人信息和復位傳，點擊這些負載了形式在tr>td 。正如我所說的，我不擅長JS和jQuery，因此如果您覺得代碼可以在某個步驟進行優化，請隨時這樣做。謝謝！

Answer 1

我這樣做了一週前，但代碼是在家裏，我現在不在。但基本上，您將表單名稱放入數組中，並隱藏未選中的表單，並且如果再次單擊了選定的表單，則使用.toggle();函數將其隱藏。

Answer 2

你可以試試這個。這假設你將表單HTML存儲在JS中。如果你將它存儲在一個隱藏的容器中，我可以告訴你如何將它移動到新父項中，或者只是將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(); 
    } 
}); 

Answer 3

你會做這樣的事情：

$('#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(); 
     } 
    }); 

老實說，這聽起來像你的頁面做太多在一個頁面上。上面顯示的規則給了我一個頭痛的問題。

Answer 4

試試這個

$(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(); 

     }); 
    });