-1

テーブル内にフォームがあり、フォームの半分を表示したい場合、ユーザーはステップ 2 ボタンを押して、その下にある残りのフォームを同じフォームと div に切り替えることができます。

hideform という div id を使用して、ボタンがクリックされるまで表示プロパティを none に変更しようとしていました

HTML

  <div id="form">
        <h1>Booking</h1>
        <p>Fill in form</p>
        <form id="contactform">
        <table id="formtable">
        <tr>
        <td>
        <label class="label" for="name">Full Name</label>
        </td>

        <td>
        <input class="input" id="name" type="text">
        </td>
        </tr>

        <tr>
        <td>
        <label class="label" for="email">E-mail Address</label>
        </td>

        <td>
        <input class="input" id="email" type="email">
        </td>
        </tr>

        <tr>
        <td>
        <label class="label" for="date">Date</label>
        </td>

        <td>
        <input class="input" type="text" id="datepicker" />
        </td>
        </tr>


        <tr>
        <td>
        </td>
        <td>
        <input id="continue" type="button" class="submitbtn" value="Continue.." >

        </td>
        </tr>

        <div id="hideform">
        <tr>
        <td>
        <label class="label" for="telephone">Telephone</label>
        </td>

        <td>
        <input class="input" id="telephone" type="text">
        </td>
        </tr>

        <tr>
        <td>
        <label class="label" for="location">Location</label>
        </td>

        <td>
        <input class="input" id="location" type="text">
        </td>
        </tr>

        <tr>
        <td>
        </td>
        <td>
        <input id="submit" type="submit" class="submitbtn" value="Submit" >

        </td>
        </tr>
        </div>
        </table>
        </form> 

    </div>  

        <script>
        $("#submit").click(function () {
        $(".hide").show("slow");
        });    
        </script>

CSS

#form{
    float:left;
    background:#0b0b0b;
    padding:0 0 10px 0;
    border-radius:3px;
    width:29%;
    margin:0 15px 0 0;
}

#hideform{
    display:none;
}
4

2 に答える 2

0
  1. divテーブルの一部をラップする がありますが、良くありません。
  2. 属性を持つ要素がありませんclass="hide"– jQuery は表示するものを見つけませ

CSS を介して「hidden」クラスの要素を表示しないように定義した場合は、次のようにしてみてください。

<div id="form">
  <h1>Booking</h1>
  <p>Fill in form</p>
  <form id="contactform">
    <table id="formtable">
      <tr>
        <td>
          <label class="label" for="name">Full Name</label>
        </td>
        <td>
          <input class="input" id="name" type="text" />
        </td>
      </tr>
      <tr>
        <td>
          <label class="label" for="email">E-mail Address</label>
        </td>
        <td>
          <input class="input" id="email" type="email" />
        </td>
      </tr>
      <tr>
        <td>
          <label class="label" for="date">Date</label>
        </td>
        <td>
          <input class="input" type="text" id="datepicker" />
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <input id="continue" type="button" class="submitbtn" value="Continue.." >
        </td>
      </tr>
      <tr class="hidden">
        <td>
          <label class="label" for="telephone">Telephone</label>
        </td>
        <td>
          <input class="input" id="telephone" type="text" />
        </td>
      </tr>
      <tr class="hidden">
        <td>
          <label class="label" for="location">Location</label>
        </td>
        <td>
          <input class="input" id="location" type="text" />
        </td>
      </tr>
      <tr class="hidden">
        <td>
        </td>
        <td>
          <input id="submit" type="submit" class="submitbtn" value="Submit" />
        </td>
      </tr>
    </table>
  </form> 
</div>

<script>
  $(document).ready(function() {
    $('#contactform').on('click', '#continue', function() {
      $('.hidden').show('slow');
    });
  });
</script>

このフィドルを参照してください:http://jsfiddle.net/fragmentedreality/Z2JQa/1/

于 2013-01-24T17:08:55.410 に答える
0

.hideHTML に存在しない要素を表示しようとしています。

フォームの HTML

<input id="submit" type="submit" class="submitbtn" value="Submit" >

jQuery

<script type="text/javascript">
$(function() {
    $("#submit").click(function () {
        $("#hideform").show("slow");
    });
});    
</script>

または、次のように HTML を変更することもできます。

<div id="hideform">

に:

<div class="hide">

css を次のように変更します。

#hideform{display:none}

.hide{display:none}

基本的に、jquery セレクターがどのように機能するかを調べて、それらがどのように機能するかをよりよく理解できるようにします。

于 2013-01-24T16:53:17.127 に答える