将变量插入模板文字 href 标记答案

【问题标题】：Insert a variable into a template literal href tag将变量插入模板文字 href 标记
【发布时间】：2021-03-24 20:55:37
【问题描述】：

我正在尝试使用从 AJAX 请求中提取的动态生成的变量在模板文字中设置 href 标记，但似乎无法弄清楚。当我单击标记的元素时没有任何反应，由于某种原因，当我检查网页上的元素时，<a href/> 没有出现。

这是我的代码：

[...]  

data.forEach(([cafeId, cafeName, cafeAddress]) => {
            var myCol = $('<div id="col"></div>');
            var myPanel = $(
              `
              <div class="card-group">
              <div class="card card-block m-3 overflow-auto" style="width: 18rem;">
                <div class="card-body">
                  <h5 class="card-title venue-name" id=\"` + cafeName + `\"><a href="venue/\"` + cafeId + `\"></a></h5>
                  <h6 class="card-subtitle mb-2 text-muted venue-address"></h6>
                  <div class="dropdown">
                    <div class="venue-options" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></div>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"><a id="share" class="dropdown-item" href="#">Share</a><a id="addToListNoModal" class="dropdown-item" href="#">Add to List</a></div>
                  </div>
                </div>
              </div>
            </div>
            `
            );
[...]

这是一个 JSFiddle：https://jsfiddle.net/50pwyfde/12/

【问题讨论】：

我不确定到底是什么导致了问题，但模板文字的重点是您不必连接字符串：'some text' + var + 'more text' 更易读为some text${var}more text（与整个事情的反引号）
您不需要转义模板文字中的引号。但这似乎也不会引起问题，所以不是这样。

标签： javascript template-literals

【解决方案1】：

<a> 元素中的引号数量错误。你正在创造一些看起来像

<a href="venue/"cafeId">

额外的引号导致它之后的所有内容都解析不正确。

将整行更改为：

<h5 class="card-title venue-name" id="${cafeName}"><a href="venue/${cafeId}"></a></h5>

【讨论】：

嘿，谢谢您的回复，我这样做了，但链接仍然不起作用，当我检查 venue-name 元素时，<a> 元素也不会出现在控制台中。
你能创建一个minimal reproducible example 以便我运行它并查看结果吗？
您的链接中没有文字，您要点击什么？虽然它仍然应该出现在控制台中。
奇怪的是，我还以为链接文本是h5元素文本。我将设置一个最小的可重现示例。感谢您的帮助。
$(".venue-name", myPanel).html(cafeName) 将锚点替换为 cafeName。

【解决方案2】：

一个双引号太多了：

`<a href="venue/\"` + cafeId + `\"></a>`

必须是：

`<a href="venue/` + cafeId + `\"></a>`

此外，模板文字语法允许您嵌入变量而不是连接多个字符串。

喜欢：

`<a href="venue/${cafeId}"></a>`

查看这个关于模板文字的优秀文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

【讨论】：