Question

如果你能帮我解决这个问题，我很乐意。我正在尝试创建联系人列表，如下所示，然后可以打开该联系人的聊天选项卡。不知怎的，似乎JQuery不起作用，如果你能帮我一把，我会很感激。

第1篇（HTML联系人）

<div id="contact-list">
    <div class="contact-line">
        <button class="contact-name">111111111</button>
        <div class="status"><div class="online"></div></div>
        <div class="user-photo"></div>
        <div class="unread-wrap"><div class="unread">2</div></div>  
    </div>
    .....
</div>


<ul id="ConversationsHeaderList">
</ul>

2nd Piece（JQuery）

        <script type="text/javascript">

            $('.contact-name').click( function() {
                var $chatHeaderContent1 = $(this).parent().html();
                var $chatHeaderContent2 = $chatHeaderContent1 + '<button class="ConversationClose" title="Close Conversation"><i class="fa fa-window-close" aria-hidden="true"></i></button>';
                $('#ConversationsHeaderList').append($chatHeaderContent2);
            });
        </script>

不知何故，我无法创造出类似这样的东西：

<ul id="ConversationsHeaderList">
<li class="ConversationsHeader">
    <button class="contact-name">Friend 1</button>
    <div class="status"><div class="online"></div></div>
    <div class="user-photo"></div>
    <div class="unread-wrap"><div class="unread">1</div></div>
    <button class="ConversationClose" title="Close Conversation"><i class="fa fa-window-close" aria-hidden="true"></i></button>          
</li>
</ul>

Answer 1

Try this, you just have to wrap the content in li element
<script type="text/javascript">

        $('.contact-name').click( function() {
            var $chatHeaderContent1 = $(this).parent().html();
            var $chatHeaderContent2 = '<li  class="ConversationsHeader">' + $chatHeaderContent1 + '<button class="ConversationClose" title="Close Conversation"><i class="fa fa-window-close" aria-hidden="true"></i></button>' + '</li>';
            $('#ConversationsHeaderList').append($chatHeaderContent2);
        });
    </script>

JQuery通过单击联系人列表中的联系人创建聊天选项卡

1 个答案: