如何解决将变量插入到模板字面量 href 标签中
我正在尝试使用从 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/
解决方法
您在 <a>
元素中的引号数量有误。你正在创造的东西看起来像
<a href="venue/"cafeId">
额外的引号导致其后的所有内容解析不正确。
将整行更改为:
<h5 class="card-title venue-name" id="${cafeName}"><a href="venue/${cafeId}"></a></h5>
,
一个双引号太多了:
`<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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。