无法使电话号码可点击（使用 CoffeeScript 的 Rails 应用程序）答案

【问题标题】：Unable to make phone number clickable (Rails app using CoffeeScript)无法使电话号码可点击（使用 CoffeeScript 的 Rails 应用程序）
【发布时间】：2015-10-17 20:41:32
【问题描述】：

我正在运行一个餐厅发现网站，用户在地图上看到一堆标记，他们点击一个标记，然后打开一个信息窗口，用户可以在其中查看餐厅的元详细信息。

问题：我正在尝试使餐厅电话号码可点击。当我在 HTML 中查看输出时，我看到了一个可点击的链接，但我没有看到该链接中的电话号码，而是看到了我的变量名称（附有屏幕截图）。当我点击链接时，我收到一条错误消息（附截图）。

查看附加代码 - 相关的 CoffeeScript 文件和正在呈现的 HTML 视图。

MAIN.COFFEE 文件

infoHTML = (data) ->
  img = if data.photo then "<img onerror='this.parentNode.removeChild(this)' src='#{data.photo}' style='margin:5px 5px 0 0;max-height:70px'>" else ''
  html = "<table><tr><td style='vertical-align:top'>#{img}</td><td>"
  html += data.name + '<br>'
  html += data.address + '<br>'
  html += "<a href= '+ data.phone + '> + data.phone</a>" + '<br>' if data.phone
  html += "<img src='/assets/uber.jpg' style='max-height:13px'> £#{data.cost}" + '<br>' if data.cost
  if data.michelin_status && data.michelin_status != 'yes'
    html += data.michelin_status + '<br>'
  html += data.rating + '% rated' if data.rating
  html + '</td></tr></table>'

查看正在渲染

我点击电话链接时看到的内容

【问题讨论】：

你在该行混合了 ' 和 "。看起来你需要一个 ' 在 "

标签： ruby-on-rails ruby coffeescript

【解决方案1】：

你已经混合了你的引号，所以而不是

html += "<a href= '+ data.phone + '> + data.phone</a>" + '<br>' if data.phone

使用

html += "<a href= '"+ data.phone + "'>" + data.phone + "</a><br>" if data.phone

另外，请检查How to mark-up phone numbers?

更新 - 使用 tel: 前缀：

html += "<a href= 'tel:"+ data.phone + "'>" + data.phone + "</a><br>" if data.phone

【讨论】：

不起作用。通过您的修复，我现在可以在视图中看到该数字，但如果我单击该数字，我会收到一条动作控制器异常消息，提示路由错误 - 没有路由匹配。
它应该是这样工作的，因为您将该电话号码添加到 href，因此您会得到例如<a href="123-4567-89">123-4567-89</a>"，它将寻找不存在的那条路线。我已将附加链接添加到我的答案中并检查它以查看如何制作可点击的电话号码（我相信您需要添加 tel: 前缀 - <a href="tel: 123-4567-89">123-4567-89</a>"）。