单击javascript的功能

Question

我有一个消息页面，显示您当前的消息。但是问题在于，它仅显示一条消息，这就是“最新”消息。它会在我按的每个消息选项卡上显示相同的消息，没有其他内容。

以下是消息标签的格式：

这是我在第一个消息选项卡上按时的感觉：

我的问题是，消息选项卡不会“刷新”特定的消息。它在每个消息选项卡上显示相同的消息。

JavaScript

<script>
$(document).ready(function() {
  $('.emailcontent input[type=checkbox]').click(function() {
    if($(this).is(':checked')) {
      $(this).closest('.list-group-item').addClass('selected');
    } else {
      $(this).closest('.list-group-item').removeClass('selected');
    }
  });

  // Clicking a message
  $('.list-group-item > .media').click(function() {

    $('.list-group-item').each(function() {
      $(this).removeClass('active');
    });

    $(this).parent().addClass('active').removeClass('unread');
    $('.nomail').addClass('hide');
    $('.mailcontent').removeClass('hide');
  });

 $('.list-group-item > .media2').click(function() {

    $('.list-group-item').each(function() {
      $(this).removeClass('active');
    });



    $(this).parent().addClass('active').removeClass('unread');
    $('.nomail2').addClass('hide');
    $('.mailcontent').removeClass('hide');
  });

});
</script>

HTML

  <div class="mainpanel">
    <div class="emailcontent">
      <div class="email-options">

        <label class="ckbox">
        </label>
      </div><!-- email-options -->
      <div class="list-group">
        <div class="list-group-item unread">
          <div class="list-left">
            <label class="ckbox">
            </label>
            </div>
          <div class="media">
            <div class="media-left">
              <img class="media-object img-circle" src="../images/photos/user1.png" alt="">
            </div>
            <div class="media-body">
              <span class="pull-right">1 hour ago</span>
              <h5 class="media-heading">Sendername1</h5>
              <h5>Title1</h5>
            </div>
            <p>Hi. There's something wri..</p>
          </div>
        </div>

                <div class="list-group-item unread">
          <div class="list-left">
            <label class="ckbox">
            </label>
            </div>
          <div class="media2">
            <div class="media-left">
              <img class="media-object img-circle" src="../images/photos/user1.png" alt="">
            </div>
            <div class="media-body">
              <span class="pull-right">1 hour ago</span>
              <h5 class="media-heading">Sendername2</h5>
              <h5>Title2</h5>
            </div>
            <p>That's title2 that means yo...</p>
          </div>
        </div>
    </div><!-- emailcontent -->

 <div class="contentpanel emailpanel">
      <h3 class="nomail">No mail selected</h3>
      <div class="mailcontent hide">
        <div class="email-header">
          <div class="pull-right">
            2 hour ago &nbsp;


          </div>
          <div class="media">
            <div class="media-left">
              <a href="#">
                <img class="media-object img-circle" src="../images/photos/user1.png" alt="">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">Sendername1</h4>
              to: me
            </div>
          </div><!-- media -->
        </div><!-- email-header -->

        <hr>

        <h3 class="email-subject">MESSAGE1</h3>
        <div class="email-body">
          <p>Text1</p>


      </div><!-- mailcontent -->

    </div><!-- contentpanel --><!-- mailcontent -->
     <div class="contentpanel emailpanel">
      <h3 class="nomail">No mail selected</h3>
      <div class="mailcontent hide">
        <div class="email-header">
          <div class="pull-right">
            2 hour ago &nbsp;


          </div>
          <div class="media2">
            <div class="media-left">
              <a href="#">
                <img class="media-object img-circle" src="../images/photos/user1.png" alt="">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">Title2</h4>
              to: me
            </div>
          </div><!-- media -->
        </div><!-- email-header -->

        <hr>

        <h3 class="email-subject">MESSAGE2</h3>
        <div class="email-body">
          <p>That's message 2</p>

      </div><!-- mailcontent -->

    </div><!-- contentpanel --><!-- mailcontent -->
  </div><!-- mainpanel -->  
  </div><!-- mainpanel -->


    </div><!-- emailcontent -->
</div>
</div>

Codepen.com, but there it won't select it all.

Answer 1

addClass（'hide'）和removeClass（'hide'）不会操纵dom元素的html内容，而只是将显示更改为none或inline，...，因此，每当删除class'hide'时，您总是会看到相同的内容。要删除html内容，应使用类似以下内容的

：

$(".email-body").empty(); 

$(".email-body").innerHTML = "<p>That's message 2</p>";

$(".email-body").append( "<p>That's message 2</p>" );

删除div内容并添加自己的内容。