使表单出现在单击事件上

Question

＆＃13;

＆＃13;

<form class="form-horizontal" method="post" action="submit.php" enctype="multipart/form-data">
  <div class="form-group">
    <label for="name" class="col-sm-2 control-label">Name:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="name" name="name">
    </div>
  </div>
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" name="email">
    </div>
  </div>
  <div class="form-group">
    <label for="phoneNumber" class="col-sm-2 control-label">Phone:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="phone" name="phone">
    </div>
  </div>

  <div class="form-group">
    <label for="major" class="col-sm-2 control-label">Major:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="major" name="major">
    </div>
  </div>

  <hr>

  <div class="form-group">
    <label for="itemForSale" class="col-sm-2 control-label">Item for Sale:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="itemForSale1" name="itemForSale1">
    </div>
  </div>

  <div class="form-group">
    <label for="quantity" class="col-sm-2 control-label">Quantity:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="quantity1" name="quantity1">
    </div>
  </div>

  <div class="form-group">
    <label for="price1" class="col-sm-2 control-label">Price:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="price1" name="price1">
    </div>
  </div>

  <div class="form-group">
    <label for="itemOneImg1" class="col-sm-2 control-label">Image 1:</label>
    <div class="col-sm-10">
      <input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemOneImg1">

    </div>
  </div>

  <div class="form-group">
    <label for="itemOneImg2" class="col-sm-2 control-label">Image 2:</label>
    <div class="col-sm-10">
      <input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemOneImg2">

    </div>
  </div>

  <hr>

  <!-- Two -->
  <div class="form-group">
    <label for="itemForSale2" class="col-sm-2 control-label">Item for Sale:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="itemForSale2" name="itemForSale2">
    </div>
  </div>

  <div class="form-group">
    <label for="quantity2" class="col-sm-2 control-label">Quantity:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="quantity2" name="quantity2">
    </div>
  </div>

  <div class="form-group">
    <label for="major2" class="col-sm-2 control-label">Price:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="price2" name="price2">
    </div>
  </div>

  <div class="form-group">
    <label for="itemTwoImg1" class="col-sm-2 control-label">Image 1:</label>
    <div class="col-sm-10">
      <input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemTwoImg1">

    </div>
  </div>

  <div class="form-group">
    <label for="itemTwoImg2" class="col-sm-2 control-label">Image 2:</label>
    <div class="col-sm-10">
      <input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemTwoImg2">

    </div>
  </div>
  <!-- END TWO -->

  <hr>

  <!-- THREE -->
  <div class="form-group">
    <label for="itemForSale3" class="col-sm-2 control-label">Item for Sale:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="itemForSale3" name="itemForSale3">
    </div>
  </div>

  <div class="form-group">
    <label for="quantity3" class="col-sm-2 control-label">Quantity:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="quantity3" name="quantity3">
    </div>
  </div>

  <div class="form-group">
    <label for="price3" class="col-sm-2 control-label">Price:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="price3" name="price3">
    </div>
  </div>

  <div class="form-group">
    <label for="itemThreeImg1" class="col-sm-2 control-label">Image 1:</label>
    <div class="col-sm-10">
      <input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemThreeImg1">

    </div>
  </div>

  <div class="form-group">
    <label for="itemThreeImg2" class="col-sm-2 control-label">Image 2:</label>
    <div class="col-sm-10">
      <input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemThreeImg2">

    </div>
  </div>

  <input id="submit" name="submit" type="submit" value="Submit" class="btn btn-primary pull-right">
</form>

＆＃13;

＆＃13;

＆＃13;

无论如何我只能得到说＆lt; - TWO - ＆gt;的部分。和＆lt; - THREE - ＆gt;，仅在有人点击＆＃34;其他文件时出现＆＃34;按钮？

我试过看，但我找不到一个简单易行的方法。谢谢你们

Answer 1

将类添加到要显示的div class="show-onclick" - 然后使用jQuery处理click事件：

HTML看起来像这样：

<div class="show-onclick form-group">
    <label for="itemForSale2" class="col-sm-2 control-label">Item for Sale:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="itemForSale2" name="itemForSale2">
    </div>
  </div>

  <div class="show-onclick form-group">
    <label for="quantity2" class="col-sm-2 control-label">Quantity:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="quantity2" name="quantity2">
    </div>
  </div>

  <div class="show-onclick form-group">
    <label for="major2" class="col-sm-2 control-label">Price:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="price2" name="price2">
    </div>
  </div>

  <div class="show-onclick form-group">
    <label for="itemTwoImg1" class="col-sm-2 control-label">Image 1:</label>
    <div class="col-sm-10">
      <input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemTwoImg1">

    </div>
  </div>

  <div class="show-onclick form-group">
    <label for="itemTwoImg2" class="col-sm-2 control-label">Image 2:</label>
    <div class="col-sm-10">
      <input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemTwoImg2">

    </div>
  </div>
  <!-- END TWO -->

  <hr>

  <!-- THREE -->
  <div class="show-onclick form-group">
    <label for="itemForSale3" class="col-sm-2 control-label">Item for Sale:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="itemForSale3" name="itemForSale3">
    </div>
  </div>

  <div class="show-onclick form-group">
    <label for="quantity3" class="col-sm-2 control-label">Quantity:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="quantity3" name="quantity3">
    </div>
  </div>

  <div class="show-onclick form-group">
    <label for="price3" class="col-sm-2 control-label">Price:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="price3" name="price3">
    </div>
  </div>

  <div class="show-onclick form-group">
    <label for="itemThreeImg1" class="col-sm-2 control-label">Image 1:</label>
    <div class="col-sm-10">
      <input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemThreeImg1">

    </div>
  </div>

  <div class="show-onclick form-group">
    <label for="itemThreeImg2" class="col-sm-2 control-label">Image 2:</label>
    <div class="col-sm-10">
      <input type="file" accept=".jpg, .jpeg, .png" class="form-control" name="itemThreeImg2">

    </div>
  </div>

  <button type="button" id="additional-files">Additional files</button>

JavaScript看起来像这样：

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script> 
$(document).ready(function() {
    $('#additional-files').click(function() {
        $('.show-onclick').show();
    });
});
</script>