0

モードと対応するボタンを切り替えたいフォームがあります。基本的に、ユーザーが最初にページを開くと、編集できないフォームが表示されます。「編集」ボタンもあります。ボタンをクリックすると、次の2つのことが起こります。1。フォームが編集可能になります。2. [編集]ボタンが非表示になり、[保存]と[キャンセル]の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>
4

1 に答える 1

1

これはあなたが上で言ったように正確なことをすることです。

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

残りのキャンセルと保存を希望する場合は、お知らせください:)

于 2012-07-27T18:22:04.433 に答える