HTML表单和javascript---在同一个表格中显示不同的表单

Question

我在一个 HTML 表格中有 4 个表单，使用 4 个按钮来调用表单。

HTML：

<div id="myAccordion">
  <table id="edit"
         class="table table-striped table-bordered table-hover table-condensed table-nonfluid1 thumbnail">
    <tbody>
      <tr>
        <td width=50%>
          <button type="button" class="btn btn-info btn-lg" data-parent="#myAccordion"
                  id="cpass"
                  onclick="document.getElementById('col').style.display = 'inline'">form1
          </button>
        </td>
        <td width=50%>
          <button type="button" class="btn btn-primary btn-lg" data-parent="#myAccordion"
                  id="cinfo"
                  onclick="document.getElementById('col').style.display = 'inline'">form2
          </button>
        </td>
      </tr>
      <tr>
        <td width=50%>
          <button type="button" class="btn btn-info btn-lg" data-parent="#myAccordion"
                  id="cmail"
                  onclick="document.getElementById('col').style.display = 'inline'">form3
          </button>
        </td>
        <td width=50%>
          <button type="button" class="btn btn-primary btn-lg" data-parent="#myAccordion"
                  id="cplace"
                  onclick="document.getElementById('col').style.display = 'inline'">form4
          </button>
        </td>
      <tr>
        <td colspan="2" style="display:none;" id="col">
          <div id="form1" class="collapse">
            <form method="POST" action="updatepassc.php" novalidate="novalidate" id="1">
              <div class="form-group">
                <label for="oldpassword" class="control-label ">1:</label>
                <input type="password" class="form-control" id="oldpassword"
                       name="oldpassword">
                <span class="help-block"></span>
              </div>
              <div class="form-group">
                <label for="newpassword" class="control-label ">2:</label>
                <input type="password" class="form-control" id="newpassword"
                       name="newpassword">
                <span class="help-block"></span>
              </div>
              <div class="form-group">
                <label for="newpassword1" class="control-label ">3:</label>
                <input type="password" class="form-control" id="newpassword1"
                       name="newpassword1">
                <span class="help-block"></span>
              </div>
              <button type="submit" class="btn btn-success btn-block">yes</button>
            </form>
          </div>
          <div id="form2" class="collapse">
            .
            <form method="POST" action="updateinfo.php" novalidate="novalidate">
              <div class="form-group">
                <label for="newinfo" class="control-label ">2</label>
                <textarea class="form-control" rows="3" id="newinfo"
                          name="newinfo">></textarea>
                <span class="help-block"></span>
              </div>
              <button type="submit" class="btn btn-success btn-block">yes</button>
            </form>
          </div>

          <div id="form3" class="collapse">
            .
            <form method="POST" action="updateinfo.php" novalidate="novalidate">
              <div class="form-group">
                <label for="newinfo" class="control-label ">3</label>
                <textarea class="form-control" rows="3" id="newinfo"
                          name="newinfo">></textarea>
                <span class="help-block"></span>
              </div>
              <button type="submit" class="btn btn-success btn-block">3</button>
            </form>
          </div>
          <div id="form4" class="collapse">
            .
            <form method="POST" action="updateinfo.php" novalidate="novalidate">
              <div class="form-group">
                <label for="newinfo" class="control-label ">4</label>
                <textarea class="form-control" rows="3" id="newinfo"
                          name="newinfo"></textarea>
                <span class="help-block"></span>
              </div>
              <button type="submit" class="btn btn-success btn-block">yes</button>
            </form>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

我想在 (td id="col") 中显示不同的表单，但它有一个错误，它会同时显示两个表单。我想要如果我点击一个按钮，将打开一个表单，另一个表单将关闭。例如，如果表单 1 打开，则表单 2、3、4 将关闭

这是javascript代码：

<script type="text/javascript">
$(document).ready(function () {
    $('#cpass').click(function () {
        $('#form1').collapse('show');
        if ($('#form2').is(':visible'))
            $('#form2').collapse('hide');
    });
    $('#cinfo').click(function () {
        $('#form2').collapse('show');
        if ($('#form1').is(':visible'))
            $('#form1').collapse('hide');
    });
    $('#cmail').click(function () {
        $('#form3').collapse('show');
        if ($('#form4').is(':visible'))
            $('#form4').collapse('hide');
    });
    $('#cplace').click(function () {
        $('#form4').collapse('show');
        if ($('#form3').is(':visible'))
            $('#form3').collapse('hide');
    });
});

jsfiddle

我该如何解决这个问题？

Answer 1

用 slideUp 和 slideDown 更新了 jQuery 代码。它一次只打开一个表格。还为所有表单添加一个通用的有意义的类名，这样您就可以在不显式使用多个 id/class 的情况下调用 hide/sildeUp

$(document).ready(function () {
    $('#cpass').click(function () {
        $('#form1').slideDown();
        $('#form2,#form3,#form4').slideUp();
    });
    $('#cinfo').click(function () {
        $('#form2').slideDown();
        $('#form1,#form3,#form4').slideUp();
    });
    $('#cmail').click(function () {
        $('#form3').slideDown();
        $('#form1,#form2,#form4').slideUp();
    });
    $('#cplace').click(function () {
        $('#form4').slideDown();
        $('#form1,#form2,#form3').slideUp();
    });
});

编辑：删除内联 onclick 和 css 以保持 html 干净

fiddle

Answer 2

虽然有一些方法可以简化你的 JS 代码，但我会保留一般格式并稍微修改一下以达到效果。请注意，您可以使用逗号来选择多个 div 对象。

您可以通过添加类似 rkamath 建议的动画来使代码更简洁。他提供了幻灯片效果。为了您的方便，这里还有一个淡入淡出效果：

$(document).ready(function () {
$('#cpass').click(function () {
    $('#form2,#form3,#form4').hide();
    $('#form1').fadeIn();

});
$('#cinfo').click(function () {
    $('#form1,#form3,#form4').hide();
    $('#form2').fadeIn(); 

});
$('#cmail').click(function () {
    $('#form4,#form2,#form1').hide();
    $('#form3').fadeIn();

});
$('#cplace').click(function () {
    $('#form3,#form2,#form1').hide();
    $('#form4').fadeIn();

});
});

这是fiddle。

如果您真的想在此处保留代码的一般结构，则可以：

$('#cpass').click(function () {
    $('#form1').collapse('show');
    if ($('#form2,#form3,#form4').is(':visible'))   $('#form2,#form3,#form4').collapse('hide');
});

$('#cinfo').click(function () {
    $('#form2').collapse('show');
    if ($('#form1,#form3,#form4').is(':visible'))  
    $('#form1,#form3,#form4').collapse('hide');
});

$('#cmail').click(function () {
    $('#form3').collapse('show');
    if ($('#form4,#form2,#form1').is(':visible')) 
    $('#form4,#form2,#form1').collapse('hide');
});

$('#cplace').click(function () {
    $('#form4').collapse('show');
    if ($('#form3,#form2,#form1').is(':visible'))  
    $('#form3,#form2,#form1').collapse('hide');
});

这里是fiddle。