-1

我在表格中有一个表格，想要显示一半的表格，一旦填写完毕，用户可以按第 2 步按钮以在相同的表格和 div 中切换其下方的其余表格。

我试图使用一个名为 hideform 的 div id 将显示属性更改为无，直到单击按钮

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 显示具有“隐藏”类的元素，请尝试以下操作：

<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 回答