Question

我正在使用JQuery来更改div的内容，并在点击按钮后将其替换为联系表单 - 但是，我根本无法使用它。我在正确的路线上吗？或者也许有更好的方法来做到这一点？

提前谢谢。

<div class="container">
  <div class="row">

    <div id="quote">
      <div class="col-md-6">
        <h3>Lorem ipsum</h3>
        <p>Lorem ipsum dolor sit amet, no inani everti tincidunt mea, dicam discere mandamus te mea. Odio enim nam te, id oportere facilisis qui. Phaedrum perpetua an his, mea ea facete vivendum. Cu dolor nusquam percipit his.Idque augue temporibus vix an, at cum mandamus democritum. Autem persequeris qui cu. Duo cu menandri eloquentiam efficiantur, vel suavitate corrumpit te. Nam te habemus scripserit, in has oratio minimum interpretaris. Nibh illud id mea, cu meliore alienum vituperatoribus est. Meis fabellas constituto cu vel, paulo omnes fierent ad sea. Nihil graecis epicuri mel ut, elaboraret percipitur ex sit. Sit nullam iudicabit eu. Ut sumo luptatum vim, cu pri aperiam volumus. Ut nam ornatus assueverit, vidisse dolorem habemus id pro. Pro putent indoctum erroribus cu, per an suscipit salutatus complectitur. At oblique euismod molestiae ius. Oratio referrentur at nam. Quod amet viderer ne ius, illud interesset eu sea, pri harum sonet ex. In propriae accusamus duo, per ignota maiestatis te. Duo ut vidit ipsum imperdiet, ea aliquid deseruisse vis. Pri quodsi appareat assueverit ea. Vis ad possim quaeque, sit quodsi impetus detraxit ut. Id est mucius propriae, ius eu integre graecis facilisi. Putant ornatus mei cu, habeo aliquando in pro, per diam mutat platonem in. Ne sea diceret abhorreant, option salutatus repudiandae an pri, ex ius nisl suavitate intellegebat.</p>

        <div class="col-md-3 col-md-offset-9">
          <a href="#quote" class="btn btn-block btn-large btn-success">Get Quote</a>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <img src="img/image.png">
    </div>

  </div>
  <script>
    $(document).ready( function(){
      $("#quote").click( function(){

        $("#quote").html("

        <div class="row">
        <div class="col-md-6">
        <h1>Contact Us</h1>

        <form class="form-horizontal">

        <div class="form-group">
        <label name="Name" class="col-sm-2 control-label">Name</label>
        <div class="col-sm-6">
        <input type="text" class="form-control" placeholder="Your Name">
        </div>
        </div>  

        <div class="form-group">
        <label name="email" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-6">
        <input type="text" class="form-control" placeholder="Your Email">
        </div>
        </div>  

        <div class="form-group">
        <label name="message" class="col-sm-2 control-label">Message</label>
        <div class="col-sm-6">
        <textarea rows="5" class="form-control" placeholder="Please enter your message"></textarea>
        </div>
        </div>  

          <!-- Checkboxes -->
        <div class="form-group">
        <label for="website" class="col-sm-2 control-label">Favourite Search Engine</label>
        <div class="col-sm-6">

        <label class="checkbox-inline"><input type="checkbox" value="option1">YouTube</label>
        <label class="checkbox-inline"><input type="checkbox" value="option2">Google</label>
        <label class="checkbox-inline"><input type="checkbox" value="option3">Yahoo</label>
        <label class="checkbox-inline"><input type="checkbox" value="option4">Baidu</label>
        </div>
        </div>  

          <!-- Radio Buttons-->
        <div class="form-group">
        <label for="gender" class="col-sm-2 control-label">Gender</label>
        <div class="col-sm-6">
        <label class="radio-inline"><input type="radio" name="genderRadio" value="option1">Male</label>
        <label class="radio-inline"><input type="radio" name="genderRadio" value="option2">Female</label>
        </div>
        </div>  

          <!-- Drop Down Menu-->
        <div class="form-group">
        <label for="urgency" class="col-sm-2 control-label">Gender</label>
        <div class="col-sm-6">
        <select class="form-control">
        <option>Urgent</option>
        <option>Medium</option>
        <option>Low</option>
        </select>
        </div>
        </div>  

          <!-- Submit Button -->
        <div class="form-group">
        <div class="col-sm-offset-2 col-sm-6">
        <button type="submit" class="btn btn-primary">Submit</button>
        <button type="submit" class="btn btn-default">Clear</button>
        </div>
        </div>  



        </form>

        </div>
        </div>

        "});
      });
  </script>

</div>
</div>

Answer 1

为了更好的可读性和可维护性，您应该将html放在单独的文件中，并使用下面的文件或部分文件加载。

$("#quote").load("HtmlPageUrl");

或页面中的某个部分：

  $("#quote").load("HtmlPageUrl #container");

JQuery：点击按钮将内容更改为联系表单

1 个答案: