Question

我想为聊天气泡建立一个循环。每次我写消息时，都应该在右边创建一个气泡。当聊天伙伴回复时，该消息应在气泡的左侧。如何开发此循环？

我当前的代码是这个：

<div class="Webview">
  <div class="message_container" id="myForm"></div>
  <form class="send_container">
    <input id="textField" type="text">
    <p>
      <input type="button" id="theButton" value="Nachricht absenden!" onclick="document.getElementById('myForm').innerHTML=document.getElementById('textField').value" />
    </p>
    <h3>
      <div id="div"></div>
    </h3>
  </form>
</div>

Answer 1

好的，这不是在循环中将消息添加到DOM中，而只是在发送消息的触发器上的Enter上添加消息。

如果您想从“文本字段”（例如文本输入）中添加值，您可能需要执行两个步骤：

从输入中获取值
将值注入气球模板（html），然后注入DOM。

然后，您应该将Javascript范围添加到html中，或者仅包含包含以下功能的js文件：

function addMessage() {
  // Add XSS validation
  const $messages = document.getElementById('myForm');
  const $textElement = document.getElementById('textField');
  const newMessage = '<div class="message-balloon">' + $textElement.value + '</div>';
  $messages.innerHTML += newMessage;
  return false;
}

<input type="button" id="theButton" value="Nachricht absenden!" onclick="addMessage()" />

在jQuery中，它将是这样（当然在js范围内）：

$("#theButton").off('click').on('click', function() {
  e.preventDefault();
  const $messages = $('#myForm');
  const $textElement = $('#textField');
  const newMessage = '<div class="message-balloon">' + $textElement.value + '</div>';
  $messages.html += newMessage;
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="theButton" value="Nachricht absenden!" />

希望它会有所帮助:)
祝你好运

如何为聊天气泡创建循环？

1 个答案: