Question

在这里，我尝试显示来自actionCable响应的图像消息。

function displayCableMessage(data) {
  var cableMessage = '';
  var profileBlock =  '<span class="chat-img1 ' + (isFromCurrentUser(data) ? 'pull-right' : 'pull-left') + '">' +
                        '<img alt="Kiet Ta" class="img-circle" ' + 'src="' + displayAvatar(data["user"]["avatar_url"]) + '">' +
                      '</span>';

  var messageListItem = '<li class="' + (isFromCurrentUser(data) ? 'left ' : 'right ') + 'clearfix ' + (isFromCurrentUser(data) ? 'admin-chat ' : '') + '">'
  switch(data['transaction_message']['activity']) {
    case 'attach_image':
      cableMessage = messageListItem + profileBlock + messageImage(data) + '</li>';
      console.log(cableMessage);
    case 'attach_file':
      cableMessage = messageListItem + profileBlock + messageFile(data) + '</li>';
    default:
      cableMessage = messageListItem + profileBlock + messageNormal(data) + '</li>';
  };
  console.log('final' + cableMessage);
  console.log(data['transaction_message']['activity']);
  return cableMessage;
}

我使用console.log显示带有switch语句的cableMessage，如下所示。我认为console.log（cableMessage）的第一和第二 - console.log（＆＃39; final＆＃39; + cableMessage）应该是相同的（当然，除了＃39; final＆＃39;）。然而，这是结果。 cableMessage number 1：

<li class="right clearfix ">
  <span class="chat-img1 pull-left">
    <img alt="Kiet Ta" class="img-circle" src="https://s3-ap-southeast-1.amazonaws.com/xtaypro-dev/paperclip/attachments/original/9382_image.png?1520472303">
  </span>
  <div class="chat-content me clearfix">
    <p>
      <a class="img" data-fancybox="gallery " href="https://s3-ap-southeast-1.amazonaws.com/xtaypro-dev/paperclip/attachments/original/10152_SAVED-20180327_0451_46844.jpg">
        <img style="height:130px;" src="https://s3-ap-southeast-1.amazonaws.com/xtaypro-dev/paperclip/attachments/original/10152_SAVED-20180327_0451_46844.jpg">
      </a>
    </p>
  </div>
</li>

cableMessage number 2：最终

<li class="right clearfix ">
  <span class="chat-img1 pull-left">
    <img alt="Kiet Ta" class="img-circle" src="https://s3-ap-southeast-1.amazonaws.com/xtaypro-dev/paperclip/attachments/original/9382_image.png?1520472303">
  </span>
  <div class="chat-content me clearfix">
    <p>10152_SAVED-20180327_0451_46844.jpg</p>
  </div>
</li>

为什么整个标签在2号中消失了？另外，最后一个console.log console.log(data['transaction_message']['activity']);相等＆＃39; attach_image＆＃39;，匹配switch语句的第一种情况。任何人都可以帮助我吗？

Answer 1

您需要添加break以确保跳出交换机并停止处理其他情况：

function displayCableMessage(data) {
  var cableMessage = '';
  var profileBlock =  '<span class="chat-img1 ' + (isFromCurrentUser(data) ? 'pull-right' : 'pull-left') + '">' +
                        '<img alt="Kiet Ta" class="img-circle" ' + 'src="' + displayAvatar(data["user"]["avatar_url"]) + '">' +
                      '</span>';

  var messageListItem = '<li class="' + (isFromCurrentUser(data) ? 'left ' : 'right ') + 'clearfix ' + (isFromCurrentUser(data) ? 'admin-chat ' : '') + '">'
  switch(data['transaction_message']['activity']) {
    case 'attach_image':
      cableMessage = messageListItem + profileBlock + messageImage(data) + '</li>';
      console.log(cableMessage);
      break;
    case 'attach_file':
      cableMessage = messageListItem + profileBlock + messageFile(data) + '</li>';
      break;
    default:
      cableMessage = messageListItem + profileBlock + messageNormal(data) + '</li>';
      break;
  };
  console.log('final' + cableMessage);
  console.log(data['transaction_message']['activity']);
  return cableMessage;
}

我的开关状况有问题吗？

1 个答案: