javascript - 如何设计我的消息线程(两个人交替)

Question

我正在管理员和用户之间创建消息线程，我的问题就在这里。当管理员发送消息时，线程加载它在我的模式的右侧，当用户消息时，管理员消息在左侧。我的代码相应地运行，但消息不会交替显示。我认为我的 CSS 设计有问题。

示例场景我在管理员和用户之间进行对话:

 USER: Do you have product xxxxx?

 ADMIN: Yes, maam we have xxxxxxx.

 USER: Thank you for the response.

在消息线程中它显示如下:

   Do you have product xxxxx?
   Thank you for the response.
                                      Yes, maam we have xxxxxxx.          

它应该像这样显示:

   Do you have product xxxxx?
                                      Yes, maam we have xxxxxxx.
   Thank you for the response.

这是我的代码:

这是我用来显示线程的 Blade :

<div class="row" style="  margin-left: 30px; margin-bottom: 5px; left: 20px; width: 530px; height: 200px; overflow: auto;">

                        <h6 style="color: blue;" id="thread_bsa"></h6>

                        <h6 style="color: green; margin-left: 200px;" id="thread_bsi"></h6>

                </div>

这是我的 javascript -> 将数据返回到我的 Blade :

function loadThreadMessage(refNumber, user){ 
            $.ajax({
                url: "loadThreadMessage",
                type: 'POST',
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                data: "refNumber="+refNumber+"&user="+user,
                dataType: 'JSON',
                success: function(data){
                    $('#thread_bsa').empty();
                    $('#thread_bsi').empty();
                    $.each(data, function(key, value){
                        if(value.role == 'BSA'){

                            $('#thread_bsa').append('<p>'+value.message+'</p>');
                        }
                        else{

                            $('#thread_bsi').append('<p>'+value.message+'</p>');
                        }

                    }); //each
                }
            }); 
        }

Answer 1

您将您的回复附加到相应的 h6 元素中。您要做的是将响应元素附加到 div。

您当前的 JavaScript 函数生成以下标记:

<div class="row" style="  margin-left: 30px; margin-bottom: 5px; left: 20px; width: 530px; height: 200px; overflow: auto;">

                    <h6 style="color: blue;" id="thread_bsa"><p>value 1</p><p>value 3</p></h6>

                    <h6 style="color: green; margin-left: 200px;" id="thread_bsi"><p>value 2</p></h6>

            </div>

所以你的CSS没有问题，但是你的JS。假设您的 div 的 ID 为“div”:

function loadThreadMessage(refNumber, user){ 
        $.ajax({
            url: "loadThreadMessage",
            type: 'POST',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            data: "refNumber="+refNumber+"&user="+user,
            dataType: 'JSON',
            success: function(data){
                $.each(data, function(key, value){
                    if(value.role == 'BSA'){

                        $('#div').append('<p class="bsa">'+value.message+'</p>');
                    }
                    else{

                        $('#div').append('<p class="bsi">'+value.message+'</p>');
                    }

                }); //each
            }
        }); 
    }

.row {
  display: flex;
  flex-direction: column;
}

.bsa {
  color: blue;
  align-self: flex-start;
}

.bsi {
  color: green;
  align-self: flex-end;
}

<div class="row" id="div">
<p class="bsi">dummy message 1</p>
<p class="bsa">dummy message 2</p>
                </div>