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

Question

我正在尝试使用从 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/

Answer 1

<a> 元素中的引号数错误。您正在创建看起来像

的东西

<a href="venue/"cafeId">

额外的引号导致它后面的所有内容都无法正确解析。

将整行更改为：

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

Answer 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

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

Insert a variable into a template literal href tag

javascript

template-literals