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;
}

的javascript：

/*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>

如果您希望我完成取消和保存的其余部分，请告诉我：）

动态更改内容和切换按钮

1 个答案: