내용과 스위치 단추를 동적으로 변경하십시오.

Question

해당 모드와 해당 단추를 전환 할 양식이 있습니다. 기본적으로 사용자가 페이지를 열면 편집 할 수없는 양식이 표시됩니다. "편집"버튼도 있습니다. 그들이 버튼을 클릭하면 두 가지 일이 일어납니다 : 1. 양식을 편집 할 수 있습니다. 2. "편집"버튼이 숨겨져 있고 "저장"과 "취소"버튼이 두 개 있습니다.

내가 지금 가지고있는 코드는 내가 위에서 언급 한 것처럼 가깝지만 작동하지 않습니다. 어떤 생각을 고칠 수 있을까요?

HTML :

<div class="eq-height widget grid_4 container flat rounded-sm bspace" id="Div5"> 
    <header class="widgetheader"> 
    <h2>Contact</h2> 
    </header> 

<input type="submit" value="Edit" class="edit edit-one-button btn lg bold ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover" style="border-style:Solid;"/> 
<input type="submit" value="Save" class="save edit-one-button btn lg bold ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover" style="border-style:Solid;"/> 
<input type="submit" value="Cancel" class="cancel edit-one-button btn lg bold ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover" style="border-style:Solid;"/> 

<fieldset id="Fieldset1" class="content form-fields"> 
       <div class="inner tspace clearfix"> 
       <ul id="contact" class="alpha"> 
        <li class="contactinfo"> 
        <label class="contactinfo grid_12"> 
         Rebekah Becker</label> 
        </li></ul> 
       </div> 

</fieldset> 

<fieldset id="Fieldset6" style="display:none" 
       class="content form-fields"> 
       <div class="inner tspace clearfix"> 
       <ul id="Ul1" class="alpha"> 
        <li class="contactinfo">    
        <label class="contactinfo grid_4"> 
         First Name:</label> 
        <input type="text" trim="true" maxlength="250" value="Rebekah" class="profile-field grid_4">    
        </li></ul> 
       <div class="clear-both"></div> 
       </div> 
</fieldset> 
</div> 

CSS :

.save, .cancel 
{ 
display:none; 
} 

자바 스크립트 :

/*script to toggle the form mode*/ 
<script type="text/javascript"> 
    var divheight; 
    $(".edit-one-button").click(function() { 
     var btnname = $(this).val(); 
     if (btnname == 'Edit') { 
     divheight = $('.widget').attr('style'); 
     $(this).closest('.widget').removeAttr('style'); 
     $(this).nextUntil('.edit-one-button').toggle(); 
     } 
     else { 
     $(this).nextUntil('.edit-one-button').toggle(); 
     $(this).closest('.widget').attr('style', divheight); 
     } 
    }); 
    </script> 

/*script to switch the buttons*/ 
<script type="text/javascript"> 
    $('.edit').click(function() { 
    $(this).hide(); 
    $(this).siblings('.save, .cancel').show(); 
    }); 
$('.cancel').click(function() { 
    $(this).siblings('.edit').show(); 
    $(this).siblings('.save').hide(); 
    $(this).hide(); 
}); 
$('.save').click(function() { 
    $(this).siblings('.edit').show(); 
    $(this).siblings('.cancel').hide(); 
    $(this).hide(); 
}); 
</script> 

Answer 1

이 당신이 상단에 말했듯이 정확한 일을하는 것입니다.

$(document).ready(function(){ 
$("#edit").click(function(){ 
$('#Fieldset1').hide(); 
$('#Fieldset6').show(); 
$('#edit').hide(); 
$('#save').show(); 
$('#cancel').show(); 
}); 
}); 
    </script> 

는 당신이 날의 나머지를하려는 경우 알려 주시기 바랍니다 :) 취소하고 저장