jquery - 如何一键更改多个部分的html

Question

我必须在 bootstrap 模式中单击一次更改多个部分中的 html，目前它只显示一个内容。

$("#ram").click(function() {
  $(".team-member-description").html('Hello shubham');
  $("#member-name").html('hello rahul');


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">

        <div class="modal-body">
          <div class="team-member-intro" id="member-name">
            Jon “maddog” Hall
            <small>Advisor, Open Source Technologies</small>
            <hr>
            <div class="team-member-description">
              <ul>
                <li>Chairman of the Board of the Linux Professional Institute</li>
                <li>In 1994, provided resources to Linus Torvalds to port Linux to 64-bit Alpha server</li>
                <li>Speaks and lectures around the world on Linux</li>
              </ul>

              <p id="team-member-description">Jon has been a programmer, systems designer, systems administrator, author and educator. Today, he works as an in-demand independent consultant.</p>
              <p>At the UK Linux and Open Source Awards, he was honored with a Lifetime Recognition Award.</p>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="ram">Open Modal</button>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModa2">Open Modal</button>

Answer 1

这是因为当你调用$("#member-name").html('hello rahul');它清除所有子元素从而删除这个 <div class="team-member-description"></div>还有