如何使用 Javascript 单击选定的 div 更改内容？

Question

我是 Javascript 的新手。我希望在 selecting 一个特定的 div 元素上更改 div 的内容。如果我 select a div，与 div 内容关联的文本应该只显示。我正在使用循环来显示内容。它就像一个聊天应用程序。如果用户单击联系人，则应显示与该用户关联的消息。我正在使用循环来显示消息和用户。

我试过的是：

树枝代码：

    {% set msg = query().from('messages').get() %}
    {% set to_add =to_name %}
{% set to_details = query().from('users_users').where('id', to_add).get() %}
    <div class="container">
               <h3 class=" text-center">Messaging</h3>
<div class="messaging">
      <div class="inbox_msg">
        <div class="inbox_people">
          <div class="headind_srch">
            <div class="recent_heading">
              <h4>{{auth_user().first_name}}</h4>
            </div>
            <div class="srch_bar">
              <div class="stylish-input-group">
                <input type="text" class="search-bar"  placeholder="Search" >
                <span class="input-group-addon">
                <button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button>
                </span> </div>
            </div>
          </div>
          <div class="inbox_chat">
              {% set newArray = [] %}
              {% for msg in msg_details %}
              {% if msg.to_name not in newArray %}

             
            <div class="chat_list active_chat"  onclick=viewMessage(this)>
              <div class="chat_people">
                <div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
                <div class="chat_ib">
                  <h5>{{msg.to_name}} <span class="chat_date">{{msg.time}}</span></h5>
                  
                </div>
              </div>

        </div>
        {% set newArray = newArray|merge([msg.to_name]) %}
            {% endif %}
            {% endfor %}

      </div>
    </div>
    <div class="mesgs">
      <div class="msg_history">
        <div class="incoming_msg">
            
          <div class="incoming_msg_img">
              <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> 
            </div>
          <div class="received_msg">
            <div class="received_withd_msg">
              <p>{{msg.message}}</p>
              <span class="time_date">{{msg.time}}</span></div>
          </div>
        </div>
        <div class="outgoing_msg">
          <div class="sent_msg">
            <p></p>
            <span class="time_date"></span> </div>
        </div>
        
       
        
      </div>
    
    </div>
  </div>
  
  

</div></div>

Javascript代码：

    <script>
    function copyText(elementId){    
var x = document.getElementById(elementId).textContent;
 if(document.getElementById('select-text').value.length == 0)
         {
            document.getElementById("btn").disabled = false; 
         document.getElementById(elementId).style.backgroundColor = "lightblue";
          document.getElementById('select-text').focus();
          document.getElementById('select-text').value += x;
         }
     else{
        
         document.getElementById('select-text').readOnly = true;
     }
}
</script>

我的输出是什么样的

Output

我的输出显示了所有消息，我只想显示特定的用户消息。如何操作？

我的 table 长什么样：

Table

Answer 1

首先，您必须使用类似查询的方式从 table 中获取数据，以确保您将从每个 from_id.

中获取一条记录

SELECT * FROM msg GROUP BY from_id;

然后你可以在树枝中循环创建左侧元素，如

{% for distinctMsg in distinctMsgs %}
<div class="chat_list active_chat"  data-userId="{{ distinctMsg.fromId }}">
    <div class="chat_people">
       <div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
       <div class="chat_ib">
           <h5>{{distinctMsg.to_name}} <span class="chat_date">{{distinctMsg.time}}</span></h5>
       </div>
     </div>
</div>
{% endfor %}

然后在你的 javascript:-

$(".chat_list").on("click", function(){

    // have a look here 
    var userId = $(this).data( "userId" );

    // Maybe display a loading icon in the right side div

    $.ajax({
       type: "POST",
       url: "/api/msg/user/history", // your controller url
       dataType: 'json',
       headers: {
          // if you have any headers to set
          "Authorization": "Bearer {{ token }}"
       },
       data:{
          "userId" : userId
       }
    })
    .done(function (response) {
         
        // stop displaying the loading icon
        // process the response and display message history in right side
     
    })
    .fail(function (xhr, status, error) {
        // show proper error message
    });

});

注意：您的页面中必须有 jQuery 才能使 Ajax 功能正常工作。

如何使用 Javascript 单击选定的 div 更改内容？

How to change contents on clicking the selected div using Javascript?

html

javascript

loops

chat

twig